0

我在我的网站中使用 Angular 材料并试图使其符合 WCAG A 级标准。使用 AInspector（Firefox 的扩展）进行一些检查似乎 mat-select 组件没有 aria-controls、aria-expanded 属性，但是查看生成的 HTML 中的这些 aria 属性，您可以在此处验证这一点。我的问题是我是否在配置中遗漏了某些内容，或者绝对 mat-selects 不符合 WCAG 规则 4.1.2 的 A 级？

mat-select AInspector 检查

4

1 回答 1

0

可访问性工具的问题在于它们被宣传为易于使用，您只需要阅读结果即可解决问题，但如果您有一些可访问性背景来准确解释结果，这将非常有帮助。可访问性工具并非万无一失，许多报告误报，这是可访问性知识派上用场的地方。您必须知道如何阅读结果以及如何过滤掉垃圾。可访问性工具只是由使用他们对 WCAG 的解释来生成结果的开发人员编写的。很多 WCAG 可能是主观的，一位可访问性专家可能会说某事失败，而另一位专家说它通过了。

话虽如此，在您的特定情况下，当我使用屏幕阅读器在演示页面上运行基本示例时，当我导航到“最喜欢的食物”选择器时它正确地显示“折叠”，然后当我按下时显示“展开spacebar”打开它。这是正确编码的好兆头。然后我可以通过下拉列表向上/向下箭头，它会读取元素的值以及“1 of 3”（取决于您的屏幕阅读器）。这些都是好兆头。

如果我看一下代码，就会发现<mat-select>它有很多 ARIA 属性。也许太多了。咏叹调就像盐。一点点会增加味道，但太多会破坏它。它有：

  • 咏叹调自动完成=“无”
  • 咏叹调-haspopup =“真”
  • aria-labelledby=" [ID 列表] "
  • aria-expanded="假"
  • 咏叹调需要=“假”
  • 咏叹调禁用=“假”
  • 咏叹调无效=“假”

最后三个是不需要的。对那些拥有“假”值与根本没有它们是一样的。

其中一个重要的（嗯，我想它们都很重要）是aria-expanded. 将其设置为 false 表示您有一个可扩展的东西，但它当前已折叠。这对我（作为屏幕阅读器用户）来说是一个触发器，我可以按下space它来展开它。 <mat-select>有它，所以我不确定为什么该工具会抱怨它。

它也有：

  • 标签索引=“0”
  • 角色="组合框"

这两个都很好。

于 2022-02-18T20:48:53.810 回答