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-label
和 aria-labelledby
在 ng-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 项目以进行这样的简单测试!
我在 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-label
和 aria-labelledby
在 ng-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 项目以进行这样的简单测试!