Headings and Visibility for Drupal Theming Guide

Below is draft information for the Accessibility Section of the Drupal Theming Guide. Please provide any feedback or suggestions in Issue #515236.

Headings

Why headings?

Headings allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections.

Use headings for:

• structure of page content
• sections and sub-sections of an article
• navigation menus
• breadcrumbs
• any other consistent sections that users may want to find or skip

Video example

Watch how a screen-reader user navigates with headings:

http://www.youtube.com/watch?v=AmUPhEVWu_E

Removing or hiding headings

Headings should not be removed using "display:none", because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". Learn more about when this is recommended in the section below about Proper use of visibility and display:none.

Recommended heading structure

H2 - Navigation Menu

H2 - Search

H1 - Page Title or Site Title

H2 - Breadcrumbs

H2 - Error/Status Messages

H2 - Page Content Sub-Title

H3 - Page Content Sub-Sub-Titles (header level 2, 3, 4, 5, 6 for structured page content below here in order)

H2 - Footer Navigation Menu Links

Further reading about headings:

W3C Recommendations, including use of h2 headings above the navigation menu preceding the h1, and use of headings in order (h1, h2, h3) without skipping levels: http://www.w3.org/TR/WCAG-TECHS/H42.html and http://www.w3.org/TR/WCAG-TECHS/H69.html

How headings help users skip navigation: http://www.webaim.org/techniques/skipnav/

Importance of headings: http://www.raymondselda.com/importance-of-html-headings-for-accessibility/

Debate about HTML 5 and whether multiple h1 elements are appropriate: http://www.brucelawson.co.uk/2009/headings-in-html-5-and-accessibility/ and http://www.iheni.com/html-5-to-the-h1-debate-rescue/ 

Proper use of "element-invisible" and "display:none"

Use of style="display:none" causes content to be removed for all users, including assistive technology users. In order to hide content from sighted users while keeping it available to assistive technology users, class="element-invisible" is often more appropriate.

Problems caused by display:none 

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." In this situation, use of "element-invisible" may be appropriate.

Appropriate use of element-invisible

According to WebAIM, "Content should only be hidden from sighted users and made available to screen reader users when content is apparent visually, but not apparent to screen reader users."

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.

Appropriate use of display:none

An appropriate use of "display:none" is for collapsing menus, where content should be removed for all users when collapsed. Another example is removal of a form field, such as a weight field, when a Javascript enhancement is active.

Further reading about invisible content 

WebAIM Recommendations: http://www.webaim.org/techniques/css/invisiblecontent/

Display:none problems for screen-readers: http://juicystudio.com/article/screen-readers-display-none.php