Search code examples
htmlangularaccessibilitywai-arialighthouse

ARIA input fields do not have accessible names

I have run my accessibility test in google chrome light house for my angular application and getting the following error

enter image description here

I have added 'aria-labelledby', but doesn't seems to be working. can anyone assist me to fix this. below is the html code which is giving me this error.

<div class="heading form-group col-md-4 col-xs-12">
     <label for="fuels">Fuel Filter</label>
     <ng-select class="oss-ngselect" [items]="fuelType" bindLabel="name"
           placeholder="View All" [(ngModel)]="searchPremiseFuelType" [dropdownPosition]="'bottom'" 
           id="fuels" name="fuels" (change)="changeFuelType(searchPremiseFuelType.type)"
           aria-labelledby="fuels">
     </ng-select>
</div>
Solution

  • aria-labelledby is used to identify another element, using its ID, to serve as the name for the current element.

    Please try giving aria-label="fuels" instead of aria-labelledby

    For more information, I would suggest to go through the following blog :: https://web.dev/aria-name/