ARIA 输入字段没有可访问的名称

ARIA input fields do not have accessible names

我在 google chrome light house 中为我的 angular 应用程序进行了 运行 可访问性测试,并收到以下错误

我添加了 'aria-labelledby',但似乎没有用。谁能帮我解决这个问题。下面是给我这个错误的 html 代码。

<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>

aria-labelledby用于标识另一个元素,使用其ID作为当前元素的名称。

请尝试给出 aria-label="fuels" 而不是 aria-labelledby

有关更多信息,我建议您浏览以下博客 :: https://web.dev/aria-name/

aria-labelaria-labelledbyng-select 上的问题是标签在单击时没有按预期聚焦 <select>,因为它仍然没有正确关联用控件。

我认为在 Angular 中(我已经有一段时间没玩过它了!),正确的做法是在控件本身上使用 labelForId 属性,它指出回到 <label> 并且应该与标签的 for 相同(所以 labelForID="test"labelForId="test")。

因此在您上面的示例中,我们将添加 labelForId 属性,如下所示:

<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)" labelForId="fuels">
     </ng-select>
</div>

您能否尝试该 OP 并确认它是否有效(没有 aria-labelledby),因为我不记得如何快速设置 Angular 项目以进行这样的简单测试!