Hide content
Hiding content is very useful for accessibility. We can visually hide content and display it only to screen reader users, hide content from screen readers and display it only visually, or hide it from both. Drupal comes with some built-in CSS classes to help make intentions clear. We do not recommend using { display: none; } as it is often misused.
| Technique | Visually Hidden | Screen Reader Hidden | Additional Info |
|
CSS:
|
Yes | No | Built into Drupal 8. In Drupal 7, it was class="element-invisible". |
|
CSS:
|
Yes | Yes | Built into Drupal 8. In Drupal 7, it was also class="element-invisible". |
|
HTML5 attribute:
|
Yes | Yes | In supported browsers, this is the same as CSS { display: none; } |
|
ARIA attribute:
|
No | Yes | Supported by modern browsers. Very similar to the HTML5 hidden attribute. |
|
CSS:
|
Yes | Yes | Built into Drupal 8. In Drupal 7, it was class="element-invisible element-focusable" |
This format is adapted from the 18F hidden content page.
Drupal’s online documentation is © 2000-2020 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.