我正在设置一个表格的样式,其中包含带有(非交互式)复选标记的表格单元。复选标记图标是通过CSS添加的。因为其中没有可访问的内容,所以我添加了一个aria-label
。现在我想知道使用这个属性作为CSS选择器来添加这些复选标记图标是不是一个好主意:
td[aria-label="yes"] {
&:after {
content: '\f00c';
font-family: $font-family-icons;
}
}
我了解到使用ARIA属性作为选择器通常是一个很好的实践,至少对于aria-hidden
、aria-expanded
等与状态相关的属性是这样的。在这种情况下,将td样式耦合到相应的标签对我来说是有意义的。当然,如果这些标签在某个时候发生了变化,我也需要调整CSS。
除此之外,你还知道其他的缺点吗?或者你对如何更优雅地解决这个问题有什么想法?
发布于 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对有视力的用户隐藏文本。我想你已经得到了你想要的效果。
<td>
<span class="visually-hidden">Yes</span>
<span aria-hidden="true">✔</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;
}
发布于 2017-03-29 04:59:34
除了这个之外,你还知道其他的缺点吗?
在使用 aria-label
属性作为样式选择器时,从技术上讲没有问题。
有关此aria-label
用法的
它本身还不足以作为所有类型的可访问性问题的有效替代文本。
很少有人使用屏幕阅读器。如果aria-label
可以为他们提供帮助(取决于屏幕阅读器的支持,请参阅@aardrian答案),那么它对大部分人来说都是无用的。
表示复选标记的特殊UTF-8代码在视觉上无非是一个图像,例如,用户可能希望有一个工具提示。因此,建议将title
属性与aria-label
结合使用,以获得更好的浏览器和屏幕阅读器支持。
然后,使用屏幕放大镜或患有认知障碍的人可以访问复选标记的替代文本,而不必滚动到列的表格标题。
对于有运动障碍的人来说,这个问题仍然很重要,因为必须滚动才能看到标题,或者使用鼠标来查看这个复选标记的含义仍然非常困难。
ARIA:没有为所有类型的残障人士提供通用的可访问性
https://stackoverflow.com/questions/43049551
复制相似问题