Hiding DOM elements - ally.js
This document explains the various ways of hiding things and the implications that come with that.
When we say an element is hidden, we usually mean it is not visible. However, the screen is not the only output mechanism we may need to hide content from. Systems like screen readers and braille displays rely on a document’s representation in the accessibility tree. For disambiguation we’ll use the following terms:
- Completely hidden
- The element is not rendered on screen, not exposed in the accessibility tree, not accessible to keyboard navigation.
- Semantically hidden
- The element is rendered on screen, but not exposed in the accessibility tree, and still accessible to keyboard navigation.
- Visually hidden
- The element is not rendered on screen, but exposed in the accessibility tree, and still accessible to keyboard navigation.
[…]
How to hide elements completely
Completely hiding elements can be done in 3 ways:
- via the CSS property
display, e.g.display: none;- via the CSS property
visibility, e.g.visibility: hidden;- via the HTML5 attribute
hidden, e.g.<span hidden>While each of these techniques has the same end result, i.e. content is not rendered and not exposed in the accessibility tree, they have different behaviors.
[…]
How to hide elements semantically
To hide content from the accessibility tree but retain the content on screen, we may use the attribute
aria-hidden="true".[…]
2016 edition of
.visuallyhidden[…]
Code language: CSS
.visuallyhidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
- It works in all modern browsers including Internet Explorer 9 - 11.
- It side-steps the need to re-style everything for focusable elements such as skip-links.
- It accounts for the deprecated
clipproperty.Keyboard navigation
The techniques to hide elements only visually or semantically come with a caveat. Focusable elements like
<a href="…">remain keyboard navigatable, even though the element is not visible on screen or not exposed in the accessibility tree.To make sure sighted keyboard users do not end up focusing elements they can’t see, and screen reader users not focusing element’s that don’t exist for them, we need to make sure that partially hidden content is not accessible to keyboard navigation using the Tab and Shift Tab keys. To accomplish this, we can add
tabindex="-1"to the elements we want to hide from the keyboard.Recap
- Use the
hiddenattribute to completely hide an element.- Use the
aria-hiddenattribute to hide an element from the accessibility tree.- Use the
.visuallyhiddenclass to hide an element from the screen.- Use
visibility: inherit;instead ofvisibility: visible;to avoid accidentally showing content.- Do not attach any CSS styles to the
aria-hiddenattribute.- Take care of keyboard focusable content that is partially hidden by adding
tabindex="-1".
