4

I have heard that applying display:none to things that are not visible is more accessible then changing opacity. However using display:none messes up some of my css animations that are progressively layered onto the core functionality.

Is it accessible if in my css the element is hidden with opacity:0 and give the element the aria-hidden=true role, or should the element also have display:none?

Another factor to be considered is the aria roles are controlled by javascript (the css has a :hover pseudo-class fallback) in this instance. So for environments without javascript the element would only be hidden with opacity:0.

Calebmer
  • 2,972
  • 6
  • 29
  • 36
  • 1
    You could also use the CSS property `visibility: hidden`. The difference to `display: none` is that it will reserve the place for the hidden element on the page. – cezar Jul 13 '15 at 12:26

1 Answers1

7

Well, that's basically how aria-hidden is defined:

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled.

If an element is only visible after some user action, authors MUST set the aria-hidden attribute to true. When the element is presented, authors MUST set the aria-hidden attribute to false or remove the attribute, indicating that the element is visible. Some assistive technologies access WAI-ARIA information directly through the DOM and not through platform accessibility supported by the browser. Authors MUST set aria-hidden="true" on content that is not displayed, regardless of the mechanism used to hide it. This allows assistive technologies or user agents to properly skip hidden elements in the document.

So I'd say "yes".

Of course, as long as you have aria-hidden set, it's trivial to use it to actually hide the element, even for the non-reader version - [aria-hidden="true"] { visibility: hidden; }, for example. Ideally, you'd set this at the end of your "hiding" animation.

In fact, since you're using opacity to hide the elements, there's no reason to use display: none - visibility: hidden will fit your requirements much better.

Community
  • 1
  • 1
Luaan
  • 62,244
  • 7
  • 97
  • 116