根据 AInspector WCAG，mat-select 不符合 A 级标准
mat-select is not level A compliant according to AInspector WCAG
我在我的网站中使用 Angular material 并试图使其符合 WCAG A 级标准。
使用 AInspector（Firefox 的扩展）进行一些检查似乎 mat-select 组件没有 aria-controls，aria-expanded 属性，但是查看 HTML 生成的那些 aria 属性在那里，你可以验证这个here。
我的问题是我是否在配置中遗漏了某些东西，或者 mat-selects 肯定不符合 WCAG 规则 4.1.2 的 A 级？
无障碍工具的问题在于，它们被宣传为易于使用，您只需要阅读结果即可解决问题，但如果您有一些，它非常很有帮助可访问性背景以准确解释结果。可访问性工具并非万无一失，许多报告误报，这正是可访问性知识派上用场的地方。您必须知道如何阅读结果以及如何过滤掉垃圾。辅助功能工具只是由开发人员编写的，他们使用 他们对 WCAG 的 解释来生成结果。许多 WCAG 可能是主观的，一位可访问性专家可能会说某件事失败了，而另一位说它通过了。
话虽如此，在您的特定情况下，当我 运行 带有屏幕 reader 的演示页面上的基本示例时，当我导航到“收藏夹”时，它正确地显示“已折叠” food”选择器，然后在我按 spacebar 打开它时说“已扩展”。这是编码正确的好兆头。然后，我可以用箭头 up/down 浏览下拉列表，它会读取元素的值以及“3 个中的 1 个”（取决于您的屏幕 reader）。这些都是好兆头。
如果我查看代码，<mat-select> 具有过多的 ARIA 属性。也许太多了。 ARIA 就像盐一样。一点点可以增强味道，但太多会破坏它。它有：
- aria-autocomplete="none"
- aria-haspopup="真"
- aria-labelledby="[id 列表]"
- aria-expanded="假"
- aria-required="假"
- aria-disabled="假"
- aria-invalid="假"
后三个不需要。为这些设置“假”值与根本不设置相同。
其中一个重要的（好吧，我想它们都很重要）是 aria-expanded。将其设置为 false 表示您有一个可扩展的东西，但它目前处于折叠状态。这对我（作为屏幕 reader 用户）来说是一个触发器，我可以按 space 来展开它。 <mat-select> 有它，所以我不确定为什么该工具会抱怨它。
它还有：
- tabindex="0"
- 角色=“组合框”
两个都不错
我在我的网站中使用 Angular material 并试图使其符合 WCAG A 级标准。 使用 AInspector（Firefox 的扩展）进行一些检查似乎 mat-select 组件没有 aria-controls，aria-expanded 属性，但是查看 HTML 生成的那些 aria 属性在那里，你可以验证这个here。 我的问题是我是否在配置中遗漏了某些东西，或者 mat-selects 肯定不符合 WCAG 规则 4.1.2 的 A 级？
无障碍工具的问题在于，它们被宣传为易于使用，您只需要阅读结果即可解决问题，但如果您有一些，它非常很有帮助可访问性背景以准确解释结果。可访问性工具并非万无一失，许多报告误报，这正是可访问性知识派上用场的地方。您必须知道如何阅读结果以及如何过滤掉垃圾。辅助功能工具只是由开发人员编写的，他们使用 他们对 WCAG 的 解释来生成结果。许多 WCAG 可能是主观的，一位可访问性专家可能会说某件事失败了，而另一位说它通过了。
话虽如此，在您的特定情况下，当我 运行 带有屏幕 reader 的演示页面上的基本示例时，当我导航到“收藏夹”时，它正确地显示“已折叠” food”选择器，然后在我按 spacebar 打开它时说“已扩展”。这是编码正确的好兆头。然后，我可以用箭头 up/down 浏览下拉列表，它会读取元素的值以及“3 个中的 1 个”（取决于您的屏幕 reader）。这些都是好兆头。
如果我查看代码，<mat-select> 具有过多的 ARIA 属性。也许太多了。 ARIA 就像盐一样。一点点可以增强味道，但太多会破坏它。它有：
- aria-autocomplete="none"
- aria-haspopup="真"
- aria-labelledby="[id 列表]"
- aria-expanded="假"
- aria-required="假"
- aria-disabled="假"
- aria-invalid="假"
后三个不需要。为这些设置“假”值与根本不设置相同。
其中一个重要的（好吧，我想它们都很重要）是 aria-expanded。将其设置为 false 表示您有一个可扩展的东西，但它目前处于折叠状态。这对我（作为屏幕 reader 用户）来说是一个触发器，我可以按 space 来展开它。 <mat-select> 有它，所以我不确定为什么该工具会抱怨它。
它还有：
- tabindex="0"
- 角色=“组合框”
两个都不错