使用aria-label作为样式选择器的最佳实践

Question

使用aria-label作为样式选择器的最佳实践

30

我正在为一个带有（非交互式）复选标记的表格设置样式。这些复选标记图标由CSS添加。由于其中没有可访问内容，我添加了aria-label属性。现在我想知道是否可以使用此属性作为CSS选择器来添加这些复选标记图标，就像这样：

```CSS [aria-label="checkmark"] { /* add checkmark icon styles here */ } ```

答案：```[aria-label="checkmark"] { /* add checkmark icon styles here */ }```

td[aria-label="yes"] {
  &:after {
    content: '\f00c';
    font-family: $font-family-icons;
  }
}

我了解到使用ARIA属性作为选择器通常是一个好的做法，至少对于像aria-hidden、aria-expanded等状态相关的属性而言。在这种情况下，我认为将td样式与相应的标签耦合是有意义的。但当然，如果这些标签在某些时候发生变化，我也需要调整CSS。

除此之外，您知道其他的缺点吗？或者您有更加优雅的解决方法吗？

- josi

2个回答

4

除此之外，你知道还有其他缺点吗？

在使用aria-label属性作为样式选择器时，从技术上讲是没有问题的。

关于这种使用aria-label的方式，它本身并不足以成为所有辅助功能问题的有效替代文本。

很少有人使用屏幕阅读器。如果aria-label可以帮助他们（取决于屏幕阅读器的支持，请参见@aardrian的答案），那对于大多数人来说就没有用处。

表示复选标记的特殊UTF-8代码在视觉上与图像别无二致，用户可能期望获得工具提示。出于这个原因，建议使用title属性，与aria-label一起使用，以获得更好的浏览器和屏幕阅读器支持。

这样，使用屏幕放大器或具有认知障碍的人就可以访问列标题的替代文本，而无需滚动到表头。

对于运动障碍的人来说，问题仍然很重要，因为不得不滚动查看标题或使用鼠标查看此复选标记的含义仍然非常困难。

简而言之：ARIA不能为所有类型的残疾人提供通用的辅助功能。

- Adam

你关于勾选符号的观点是正确的。为此，由于我更喜欢尽可能避免使用 title（因为我在可访问名称计算方面遇到了问题），我有时会采用这种技术：http://tink.uk/accessible-emoji/ 我还对其进行了调整，使其可以通过键盘访问：http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html （这不是对你答案的批评，只是想让你发现这些帖子很有用） - aardrian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aardrian · Accepted Answer

为了表示HTML中本来没有表达的控制状态，例如展开（例如），那么依靠ARIA属性作为样式选择器可能是一个很好的选择。在这种情况下，您依赖CSS根据ARIA在页面上添加内容，我认为您不需要。首先，对于aria-label（在<td>以及其他元素上）的支持在旧版浏览器/屏幕阅读器组合中可能不稳定，其次，旧版浏览器/屏幕阅读器组合对CSS生成的内容的支持可能更加不稳定。我不了解您的用户，但我不知道这是否重要。这还假设CSS在没有任何问题的情况下加载（网络掉线等）。这意味着一些用户可能永远听不到或看不到单元格中的值。我尽量确保原始内容可用，无论CSS是否加载以进行样式设置，并且我还尽量减少对ARIA的依赖。话虽如此，aria-hidden支持通常比我上面提到的两个问题历史更好。

让我再给你提供一个想法。这并不一定更好，但考虑到未知用户AT配置和潜在的网络问题时，我认为它更加强大。我将文本和复选框都放入了中。如果CSS从未加载（或用户使用的是非常老旧的浏览器），那也没关系。最糟糕的情况就是用户看到/听到"Yes check"。然后aria-hidden确保勾号不会被屏幕阅读器宣读。CSS将文本隐藏起来，对于有视力的用户也是如此。我认为你可以获得你想要的效果。

<td>
 <span class="visually-hidden">Yes</span>
 <span aria-hidden="true">&#10004;</span>
</td>

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}