问题
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-label to 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:
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-expanded etc. 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.
Do you know any other drawbacks apart from that? Or do you have ideas on how to solve this more elegantly?
回答1:
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.
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 combos can be more shaky. I know nothing about your users, however, to know if this matters.
This also assumes the CSS loads without any issue (network drops, etc).
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.
That being said, aria-hidden support is generally historically better than the two issues I raise above.
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.
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."
Then the aria-hidden makes 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.
<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;
}
回答2:
Do you know any other drawbacks apart from that?
On using aria-label attribute as a selector for styling, there's technically no problem.
- Concerning this use of
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-label can 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.
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 title attribute is recommended, used conjointly with aria-label for better browser and screen reader support.
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
来源：https://stackoverflow.com/questions/43049551/best-practice-to-use-aria-label-as-a-selector-for-styling