Hiding Dimmed or "Ghost" Content from Screen Reader Users without Removing it Visually (as in Modal Windows)
When a modal window appears on screen, often the rest of the site is blocked from mouse access, keyboard access and obscured visually (usually darkened). The idea is that the user is supposed to focus on that modal window only. Until WAI-ARIA, there was no simple way to leave the image of the content on the screen without the possibility that screen readers would read outside the modal window, breaking the experience of the modal window for these users. WAI-ARIA's
aria-hidden property can now be used for this.
true to hide the content from screen reader users. When the content becomes relevant again, be sure to set
This property will have no visual effect, so be sure to test with a screen reader.
aria-hidden will prevent text in ghost content from being read with a screen reader, it will not stop tab and shift-tab from allowing keyboard users to leave the modal and get lost in the ghost content. Similarly, if a screen reader user uses tab or shift tab, they typically will still find the content that is hidden with aria-hidden. While keyboard traps are generally very bad for accessibility, this is one case where it's good to add code that keeps specifically tab and shift tab inside the dialog. Have the keyboard access cycle within the dialog as described here. If you do this, also be sure that the escape key will close the modal.
Aria-hidden is for content that developers have hidden visually and made inaccessible to keyboard access and mouse clicks (as in the background of a modal window). Occasionally, it can be used to work-around an issue for which the standard coding has not yet provided a solution. However, this should be very specific to specific problem (replace a word or two), it should not be used generally to create two large separate versions of content as in:
- An off-screen version for screen reader users. (not recommended)
- An on-screen version with aria-hidden and keyboard access removed for the average user. (not recommended)
The above is not a good idea because there are many users that are neither completely blind nor mouse users with 20/20 vision:
- There are users with mobility impairment that use vision plus keyboard access.
- There are users with learning disabilities that use the mouse plus text-to-speech out put, clicking words on the screen to hear them spoken.
- Users with low vision will often use magnification, plus speech output.