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

Question

我正在设计一个 table 的样式，其中有 table 个带有（非交互式）复选标记的单元格。复选标记图标是通过 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, and second, support for CSS generated content by older browser / screen reader combos 可能更不稳定。但是，我对您的用户一无所知，不知道这是否重要。

这还假定 CSS 负载没有任何问题（网络中断等）。

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

无论 CSS 是否加载样式，我都尽量确保原始内容可用，我还尽量减少对 ARIA 的依赖。

话虽这么说，aria-hidden 历史上的支持通常比我上面提出的两个问题要好。

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

我将文本和复选标记都放入 <td>。如果 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;
}

Answer 2

Do you know any other drawbacks apart from that?

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

关于 aria-label

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

很少有人使用 screen-reader。如果 aria-label 对他们有帮助（取决于屏幕 reader 支持，请参阅@aardrian 回答），这对大部分人来说没有用。

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

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

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

TLDR：ARIA 并未为所有类型的残障人士提供普遍可访问性

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

Best practice to use aria-label as a selector for styling

css

accessibility

css-selectors

wai-aria