Last updated November 18, 2012. Created by Jeff Burnz on May 25, 2009.
Edited by LeeHunter, leenwebb, Tor Arne Thune, Jacine. Log in to edit this page.
Not all techniques for hiding content are approriate for users with screen readers or other adaptive technologies. This page covers major techniques for hiding content for all users and users with screen readers.
Completely hide content for all users
Use case: Populated block regions on the block configuration screen (admin/build/block).
CSS:
/* Line 10 blocks.css (Drupal 7) */
#blocks tr.region-populated {
display: none;
}Reasoning: To de-clutter the screen for both sighted users and screen reader users. The information being hidden is of no use to anyone on this particular page.
Misuse
A common inappropriate use of "display:none" is to remove a form label or heading in order to change the visual appearance of a page. That can render the form element unusable.
If you remove a form label with "display:none," a user might tell you, "I have a required text field to type into but I have no idea what the field is for." In this situation, use of "element-invisible" is a more appropriate choice.
Making content invisible
Use case: Hiding skip navigation links or information that is already visually apparent in other ways.
CSS: Use class="element-invisible" or position: absolute techniques.
Reasoning: display: none will hide the content from screen readers and thus is not appropriate in many situations.
An example in Drupal 7 is the heading (h2) above the status messages. By default, it is an invisible heading because in most themes the status messages are displayed prominently in a colored box. Error messages, warnings and status messages are eye-catching for sighted users. For assistive technology users the heading is still available and helps them find or skip these messages in a consistent location.
Code examples:
In Drupal 7, element-invisible is defined in system.css:
.element-invisible {
height: 0;
overflow: hidden;
position: absolute;
}Note: in Drupal 8 this class may be renamed to .invisible.