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

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