developer.paciellogroup.com

HTML5 Accessibility Chops: hidden and aria-hidden

Steve Faulkner
6-8 minutes

Latest Update: The state of hidden content support in 2016

As a developer and also a consultant advising developers on how to develop accessible content, it is important to have and provide up to date and practical knowledge about robust development techniques. A recent question on Stack Overflow got me thinking: What is the best method for hiding content for all users? For hiding content for some users?

The standard technique for hiding content for all users has been the use CSS display:none. Now, both ARIA and HTML5 also provide a semantic indication of content state that indicates content is hidden or should not be available to users:

HTML5 hidden

The HTML5 hidden attribute provides a semantic indicator:

All HTML elements may have the hidden content attribute set. The hidden attribute is a boolean attribute. When specified on an element, it indicates that the element is not yet, or is no longer, relevant. User agents should not render elements that have the hidden attribute specified.

Example code:

<p hidden>This content is hidden.</p>

HTML5 hidden effects:

  • In supporting browsers the content is not displayed to any user.
  • semantic indicator of state in HTML code (hidden attribute)
  • CSS style of display:none applied by browser.
  • Focusable content is not included in tab order.
  • Not included in the accessibility tree.

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>



<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-hidden attribute)
  • 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:

Hiding content from all users

If you want to hide content from all users, use the HTML5 hidden attribute (along with CSS display:none for browsers that do not yet support hidden) There is no need to use aria-hidden.

Example code:

.hidden {display:none} <p hidden class="hidden">this content is hidden from all users</p>

Hiding non interactive content from visible display

Use an off screen technique to remove content from visible display, but still available to screen reader users:

Example code: 

.offscreen
 {
 clip-path: inset(100%);
 clip: rect(1px 1px 1px 1px); 
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
 }
 <div class="offscreen">This text is visually hidden.</div>

Modified example code from: WebAIM – CSS in Action: Invisible Content Just for Screen Reader Users

Updated code examples, October 2016,  to take into account new advice from Jessica Beach: Beware smushed off-screen accessible text

Hiding interactive content from visible display

Hiding interactive (focusable) content from visible display using the off screen technique means it is not visible, but still  in the tab order and causes issues for keyboard only users. Focusable content should only be hidden from visible display if the focusable element becomes visible when it recieves focus:

Example code: 

a.offscreen
{
 clip: rect(1px 1px 1px 1px); 
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
 }

a.offscreen:focus
 {
position:relative;
 clip:auto;
 width:auto;
 height:auto;
 overflow:auto;
 }

<a class="offscreen" href="test.html">this link is offscreen unless it has focus</a>

Notes by Ted Drake, on use of the off screen technique described:

Using negative position can create long scroll bars when localizing a site for a rtl language. Also, it uses CSS properties that are commonly used and easy to accidentally over-ride.

The Yahoo Accessibility Lab recommends using clip for content that should be hidden from the visual user, yet available to screen reader users. Thierry Koblentz has a great article on this technique, as well as the underlying philosophy behind using the correct CSS techniques for hiding content. Clip your hidden content for better accessibility

The tests

Support for aria-hidden, HTML5 hidden and the off screen technique was tested using JAWS, Window Eyes and NVDA (Windows), ChromeVox (Chrome OS), VoiceOver (iOS and Mac OSX) and Orca (Linux) with supporting browsers for each OS.

Result summary

  • Use of HTML5 hidden (+ CSS display:none) worked in all screen reader/browser combinations tested.
  • Use of the off screen technique worked in all screen reader/browser combinations tested.
  • Use of aria-hidden=true worked in some screen reader/browser combinations tested.
  • Use of aria-hidden=false had no effect in any of the screen reader/browser combinations tested. In other words if content is hidden from all users using HTML5 hidden or display:none applying aria-hidden=false to the content does not make it visible to screen reader users.

Detailed tests and test results are available -updated 11/2013.

further reading:

Providing Context for Ambiguous Link Phrases