HTML Accessibility

aria-hidden

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

Example code:

<p aria-hidden="true">This content is hidden.</p>
<p aria-hidden="false">This content is not hidden.</p>
<!-- aria-hidden="false" is same as -->
<p aria-hidden="true">This content is hidden.</p>
<p>This content is not hidden.</p>

aria-hidden effects:

• In supporting browsers in conjunction with supporting assistive technology the content is not conveyed to the user via the assistive technology.
• Content is displayed in the browser.
• semantic indicator of state in HTML code (aria-hiddenattribute)
• In some browsers its not included in the accessibility tree in other browsers it is included in the accessibility tree.
  • For browser that include aria-hidden content in the accessibility tree focusable content is included in tab order and is navigable and operable for AT users (as well as other users).
• In browsers that do include the content in the accessibility tree the content has an accessible MSAA (if supported) state of invisible. If IA2 is supported aria-hidden=true is passed as an object attribute. If UIA is supported aria-hidden=true is passed as an ARIA property.
• aria-hidden=false is not mapped in any browser that supports aria-hidden, thus its use has no meaning or in other words has the same meaning as its absence.

CSS display:none

As mentioned, the standard method to hide content from all users in browsers that support CSS is and has been to use CSS display:none.

Example code:

<p style="display:none">This content is hidden.</p>

display:none effects:

• In supporting browsers the content is not displayed to any user.
• Focusable content is not included in tab order.
• Not included in the accessibility tree (except for IE)
• In IE the content has an accessible MSAA (if supported) state of invisible.  If UIA is supported OffScreen=true.

Recommendations: