5 ms·

I can't find the information, but my understanding is that this approach isn't good from an accessibility standpoint because a screenreader still interprets the

I can't find the information, but my understanding is that this approach isn't good from an accessibility standpoint because a screenreader still interprets the icons as their corresponding character and reads that character. As a result, instead of ignoring a checkmark icon, it would try to pronounce it as a single letter. UPDATE: Further digging seems to validate that most modern screen readers do ignore pseudo elements. So, there's no doubt that this solution is promising. However, as with anything, your user agent baseline should be considered before using it. Saying that everyone should be using this right now probably isn't a reliable blanket recommendation.

TheBurningOr 15y ago
Do screen readers parse CSS in their reading? I would think this would avoid that problem by using the :before pseudo classes rather than injecting it into the dom directly. edit: fuller thought.
mk 15y ago
This is the same problem I have with this approach. It seems like a cool idea, but I don't want to break accessibility. I think you can get around this using aria and having it skip over that element. See aria-hidden: http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden http://www.w3.org/TR/wai-aria/states_and_properties#aria-hid... Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.
- obeattie 15y ago
  I may be misunderstanding the spec, but it looks like you have to be able to set element attributes for this approach to work, which I'm fairly certain you can't set with CSS. And I guess even if you can use JS to set the attributes, there's no way to set them on a pseudo-element anyway.
JoachimSchipper 15y ago
This particular implementation uses CSS before: rules. These are likely ignored by (current!) screenreaders.
metageek 15y ago
What happens if you use a nonstandard Unicode character, something from the one of the private use areas? Will screen readers ignore it?
eli 15y ago
There's a rather large gap between what the accessibility standards say you should do and the way actual screen readers work.

TheBurningOr 15y ago

Do screen readers parse CSS in their reading? I would think this would avoid that problem by using the :before pseudo classes rather than injecting it into the dom directly. edit: fuller thought.

mk 15y ago

This is the same problem I have with this approach. It seems like a cool idea, but I don't want to break accessibility. I think you can get around this using aria and having it skip over that element. See aria-hidden: http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden http://www.w3.org/TR/wai-aria/states_and_properties#aria-hid... Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

obeattie 15y ago
I may be misunderstanding the spec, but it looks like you have to be able to set element attributes for this approach to work, which I'm fairly certain you can't set with CSS. And I guess even if you can use JS to set the attributes, there's no way to set them on a pseudo-element anyway.

JoachimSchipper 15y ago

This particular implementation uses CSS before: rules. These are likely ignored by (current!) screenreaders.

metageek 15y ago

What happens if you use a nonstandard Unicode character, something from the one of the private use areas? Will screen readers ignore it?

eli 15y ago

There's a rather large gap between what the accessibility standards say you should do and the way actual screen readers work.