CSS 使用 aria-label 作为样式选择器的最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43049551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best practice to use aria-label as a selector for styling
提问by josi
I am styling a table that has table cells with (non-interactive) checkmarks in it. The checkmark icons are added via CSS. As there is no accessible content in it, I added an aria-labelto it. Now I wonder if it is a good idea to use this attribute as a CSS selector to add those checkmark icons like this:
我正在设计一个表格，该表格的表格单元格中带有（非交互式）复选标记。复选标记图标是通过 CSS 添加的。由于其中没有可访问的内容，我在其中添加了一个aria-label。现在我想知道使用这个属性作为 CSS 选择器来添加像这样的复选标记图标是否是个好主意：
td[aria-label="yes"] {
&:after {
content: '\f00c';
font-family: $font-family-icons;
}
}
I learned that using ARIA attributes as selectors is generally a good practice, at least for state related attributes like aria-hidden, aria-expandedetc. In this case it made sense to me to have the td styling coupled to the corresponding label. But of course if those labels change at some time I'll need to adapt the CSS too.
我了解到，使用ARIA属性作为选择通常是一个很好的做法，至少对国家相关的属性一样aria-hidden，aria-expanded等等。在这种情况下，它是有道理的，我有TD造型连接到对应的标签。但当然，如果这些标签在某个时候发生变化，我也需要调整 CSS。
Do you know any other drawbacks apart from that? Or do you have ideas on how to solve this more elegantly?
除此之外，你知道其他的缺点吗？或者您对如何更优雅地解决这个问题有什么想法？
采纳答案by aardrian
To represent control states that are not natively conveyed in HTML, such as expanded (for example), then leaning on ARIA attributes as style selectors can be a good fit.
要表示 HTML 中未原生传达的控件状态，例如展开（例如），则依靠 ARIA 属性作为样式选择器可能是一个不错的选择。
In this case you are relying on CSS to add content to a page based on ARIA I do not think you need. First, support for aria-label(on <td>s as well as other elements) can be shaky on older browser / screen reader combos, and second, support for CSS generated content by older browser / screen reader comboscan be more shaky. I know nothing about your users, however, to know if this matters.
在这种情况下，您依赖 CSS 将内容添加到基于 ARIA 的页面，我认为您不需要。首先，旧版浏览器/屏幕阅读器组合对aria-label（on <td>s 以及其他元素）的支持可能不稳定，其次，旧版浏览器/屏幕阅读器组合对 CSS 生成内容的支持可能更不稳定。但是，我对您的用户一无所知，不知道这是否重要。
This also assumes the CSS loads without any issue (network drops, etc).
这也假设 CSS 加载没有任何问题（网络掉线等）。
This means some users may never hear nor see the value in the cell.
这意味着某些用户可能永远不会听到或看到单元格中的值。
I try to ensure that the raw content is available regardless of whether the CSS loads to style it, and I also try to limit my reliance on ARIA.
我尝试确保原始内容可用，无论 CSS 是否加载以对其进行样式设置，并且我还尝试限制我对 ARIA 的依赖。
That being said, aria-hiddensupport is generally historically better than the two issues I raise above.
话虽如此，从aria-hidden历史上看，支持通常比我上面提出的两个问题要好。
Let me toss another idea your way. This is not necessarily better, but I think it is more robust when considering unknown user AT configurations and potential network issues.
让我向你提出另一个想法。这不一定更好，但我认为在考虑未知用户 AT 配置和潜在网络问题时，它更健壮。
I put both the text and checkmark into the <td>. If the CSS never loads (or the users is on a really old browser), no big deal. The worst that will happen is a user sees / hears "Yes check."
我将文本和复选标记都放入<td>. 如果 CSS 永远不会加载（或者用户使用的是非常旧的浏览器），那没什么大不了的。最糟糕的情况是用户看到/听到“Yes check”。
Then the aria-hiddenmakes sure the checkmark does not get announced to screen readers. The CSS hides the text from sighted users. And I think you have the effect you want.
然后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;
}
回答by Adam
Do you know any other drawbacks apart from that?
除此之外，你知道其他的缺点吗？
On using aria-labelattribute as a selector for styling, there's technically no problem.
使用aria-label属性作为样式选择器，技术上没有问题。
- Concerning this use of
aria-label
- 关于这种使用
aria-label
It's itself not sufficient enough to be a valid alternative text for all kind of accessibility concerns.
对于所有类型的可访问性问题，它本身不足以成为有效的替代文本。
Very few people use a screen-reader. If aria-labelcan be an help for them (depending on screen reader support, see @aardrian answer), it's of no use for a large part of the population.
很少有人使用屏幕阅读器。如果aria-label可以为他们提供帮助（取决于屏幕阅读器的支持，请参阅@aardrian 的答案），它对大部分人来说毫无用处。
A special UTF-8 code representing a checkmark is nothing else visually than an image, and users may expect, for instance, to have a tooltip. For that matter, the titleattribute is recommended, used conjointly with aria-labelfor better browser and screen reader support.
表示复选标记的特殊 UTF-8 代码在视觉上无非是图像，例如，用户可能希望有工具提示。就此而言，title推荐使用该属性，与aria-label更好的浏览器和屏幕阅读器支持结合使用。
Someone using a screen magnifier or with a a cognitive disorder, may then be able to access the alternative text of the checkmark without having to scroll to the table heading of the column.
使用屏幕放大镜或患有认知障碍的人可能能够访问复选标记的替代文本，而无需滚动到列的表格标题。
The problem will still be important for someone with motor disabilities because having to scroll to see the heading or using the mouse to see what this checkmark means is still very difficult.
对于有运动障碍的人来说，这个问题仍然很重要，因为必须滚动查看标题或使用鼠标查看此复选标记的含义仍然非常困难。
TLDR: ARIA does not give universal accessibility for all kind of disabilities
TLDR：ARIA 没有为所有类型的残疾人提供普遍的可访问性
