Question

我正在构建一个表格，其中包含带有（非交互式）复选标记的表格单元格。复选标记图标通过CSS添加。由于其中没有可访问的内容，我向其添加了aria-label。现在我想知道使用这个属性作为CSS选择器来添加这样的复选标记图标是否是一个好主意：

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

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

除此之外你还知道其他任何缺点吗？或者你对如何更优雅地解决这个问题有想法吗？

Answer 1

要表示未在HTML中本地传达的控件状态，例如展开（例如），那么依靠ARIA属性作为样式选择器可能非常合适。

在这种情况下，您依靠CSS根据ARIA向页面添加内容，我认为您不需要。首先，支持aria-label（在<td> s以及其他元素上）can be shaky on older browser / screen reader combos，第二，support for CSS generated content by older browser / screen reader combos可能更不稳定。但是，我对您的用户一无所知，知道这是否重要。

这也假设CSS加载没有任何问题（网络丢弃等）。

这意味着某些用户可能永远不会听到也看不到单元格中的值。

我尝试确保原始内容可用，无论CSS是否加载样式，我也试图限制我对ARIA的依赖。

话虽如此，aria-hidden支持在历史上通常比我提出的两个问题更好。

让我以你的方式抛出另一个想法。这不一定更好，但我认为在考虑未知的用户AT配置和潜在的网络问题时它会更强大。

我将文字和复选标记都放入<td>。如果CSS从未加载（或者用户是在一个非常古老的浏览器上），那没什么大不了的。最糟糕的情况是用户看到/听到“是的检查。”

然后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;
}

Answer 2

除此之外你还知道其他任何缺点吗？

使用aria-label属性作为样式选择器，技术上没有问题。

关于aria-label

它本身不足以成为所有可访问性问题的有效替代文本。

很少有人使用屏幕阅读器。如果title可以为他们提供帮助（取决于屏幕阅读器的支持，请参阅@aardrian答案），对大部分人来说都没有用。

表示复选标记的特殊UTF-8代码在视觉上不是图像，用户可能期望例如有工具提示。就此而言，建议使用aria-label属性，与{{1}}一起使用，以获得更好的浏览器和屏幕阅读器支持。

有人使用屏幕放大镜或认知障碍，然后可以访问复选标记的替代文本，而无需滚动到列的表格标题。

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

TLDR：ARIA不能为所有类型的残疾提供普遍可及性

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

2 个答案: