首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用aria-label作为样式选择器的最佳实践

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

Stack Overflow用户
提问于 2017-03-27 22:45:10
回答 2查看 56.9K关注 0票数 16

我正在设置一个表格的样式,其中包含带有(非交互式)复选标记的表格单元。复选标记图标是通过CSS添加的。因为其中没有可访问的内容,所以我添加了一个aria-label。现在我想知道使用这个属性作为CSS选择器来添加这些复选标记图标是不是一个好主意:

代码语言:javascript
运行
复制
td[aria-label="yes"] {
  &:after {
    content: '\f00c';
    font-family: $font-family-icons;
  }
}

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

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-29 01:04:44

为了表示不是在HTML中原生传达的控件状态,例如扩展的(例如),那么依赖ARIA属性作为样式选择器可能是一个很好的选择。

在这种情况下,您将依赖CSS向基于ARIA的页面添加内容,我认为您不需要。首先,对aria-label (在<td>上以及其他元素上) 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从未加载过(或者用户使用的是非常旧的浏览器),也没什么大不了的。最糟糕的情况是用户看到/听到"Yes check“。

然后,aria-hidden确保复选标记不会通知屏幕阅读器。CSS对有视力的用户隐藏文本。我想你已经得到了你想要的效果。

代码语言:javascript
运行
复制
<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;
}
票数 7
EN

Stack Overflow用户

发布于 2017-03-29 04:59:34

除了这个之外,你还知道其他的缺点吗?

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

有关此aria-label用法的

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

很少有人使用屏幕阅读器。如果aria-label可以为他们提供帮助(取决于屏幕阅读器的支持,请参阅@aardrian答案),那么它对大部分人来说都是无用的。

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

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

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

ARIA:没有为所有类型的残障人士提供通用的可访问性

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43049551

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档