aria-hidden="true" should not have display: none !important

[ducklet]

Hi,

I'm trying to use Font Awesome icons that are purely decorative and sit next to the text a screen reader needs. Without aria-hidden="true", a screen reader user will hear the same information twice, but aria-hidden="true" has been given the css rule display: none !important, which totally defeats its purpose. Can you please fix this? (Sorry it's a .pdf, but WebAIM recommends aria-hidden="true" for these icons: http://webaim.org/presentations/2014/myeducator/POUR.pdf)

Thanks!

[ducklet]

cc @edwelker

[maya]

Hi @ducklet, thanks for opening this issue! Can you point us to where you're seeing this rule in the code base?

[joshbruce]

Hi @ducklet, I'm curious about this as I really try to make thing accessible as much as possible.

Can you show the markup that is causing it to be read by the screen reader?

For example:

<i class="fa [icon]"></i>

or something else.

[edwelker]

https://github.com/18F/web-design-standards/blob/18f-pages-staging/src/stylesheets/core/_base.scss#L23

[scottaohara]

+1 for this issue.

aria-hidden is quite useful to hide content from assistive technology, but not visually (as ducket points out).

maybe this should be replaced with the native [hidden] attribute, as that has some older cross browser issues where a display: none!important would be useful.

[ducklet]

Hi @jbrucegsa,

The issue is actually not that it will be read by a screen reader, but that I can't use it as intended because the display: none !important hides any element it's applied to from sighted users as well.

Thanks for looking into it.

[nickbristow]

This is a good point @ducklet

We should change how aria-hidden="true" is handled with CSS @maya

We may need to add to update some things that were being hidden that way.

[maya]

Thanks for all the feedback!

I agree with removing that from the CSS, and updating the instances that were relying on that to hide things in favor of something else (i.e. hidden attribute or display: none! on a per component basis like @scottaohara mentions in #1121) @nickbristow

[maya]

Good news, I searched the Draft Standards and the only place using aria-hidden="true" in this way is the accordion component. So if we can solve it there, we can remove this CSS.

[jhfrench]

FWIW: The state of hidden content support in 2016

[maya]

@jhfrench Just wanted to note the hidden attribute is supported by IE 11 and above and this project supports IE 9 and above, so doesn't look like we can use it. http://caniuse.com/#search=hidden

[joshbruce]

@maya - Not sure implications, and not in a position to verify. The hidden attribute, if memory serves, is different than aria-hidden; so, #1192 still stands, yeah? Or, do we need to revisit?

[maya]

@joshbruce nope, we're all good, I just wanted to reply in response to #1120 (comment).