使用aria标签作为样式选择器的最佳实践

Question

我正在设计一个表格，其中具有带有（非交互式）复选标记的表格单元格。复选标记图标通过CSS添加。由于其中没有可访问的内容，因此在其中添加了一个aria-label。现在，我想知道将此属性用作CSS选择器以添加如下所示的选中标记图标是否是一个好主意：

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

我了解到，至少对于与状态相关的属性（例如aria-hidden）aria-expanded等，使用ARIA属性作为选择器通常是一个好习惯。在这种情况下，将td样式耦合到相应的标签对我来说很有意义。但是，当然，如果这些标签有时会改变，那么我也需要修改CSS。

除此以外，您还知道其他缺点吗？或者您对如何更优雅地解决此问题有想法？

Answer 1

要表示 HTML 中未原生传达的控件状态（例如展开的控件状态），那么依靠 ARIA 属性作为样式选择器可能是一个不错的选择。

在这种情况下，您依赖 CSS 将内容添加到基于 ARIA 的页面，我认为您不需要。首先，对aria-label（在<td>s 以及其他元素上）的支持在旧版浏览器/屏幕阅读器组合上可能不稳定，其次，旧版浏览器/屏幕阅读器组合对 CSS 生成内容的支持可能更不稳定。然而，我对你的用户一无所知，不知道这是否重要。

这还假设 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;
}