Headings

Must

Content must provide a logical and hierarchical heading structure, as supported by the platform.

Description

A good heading structure enables people to scan a page/screen quickly and understand the structure of the content. Screen reader users can also use headings to quickly navigate within a page or screen.

Headings are standard for HTML, and available on iOS since iOS6. Android does not have a way to distinguish headings programmatically, however some elements, such as tables and listviews, do have headers.

IOS

Explicit headings are only available in version iOS6 and later and can be assigned by using the UIAccessibilityTraitHeader. Aside from that headers are available in UITableView, UINavigationBar and content displayed via a web view.

iOS example

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
	if (section == 0)
{
	return NSLocalizedString (@"Weather", @"Section header for Weather 
area of table");
}
else if (section == 1)
{
	return NSLocalizedString(@"Warnings", @"Section header for warnings area of table");
}
else
{
// Unknown section - log error, return safely
return nil;
}
}                        

UITableView with several sections without headers.

                        

ANDROID

Headings are not available. Explicit headers are provided via the HeaderViewListAdapter which is only available to list views.

HTML

For responsive sites think carefully about the use of headings if content is reduced on mobile. For example, on desktop a heading may be given with an image and some brief text. On mobile this may collapse down to the heading and image, which may work better as a list across both desktop and mobile.

Other things to consider, in order to make headings more usable for screen reader users:

  • Lists and headings used together to mark up content should be avoided;
  • Headings should be coded around content that doesn’t change, i.e. a category name such as ‘UK News’ rather than a news item that will update frequently;
  • Headings should not overwhelm a page as this can undermine their usefulness for screen reader users when navigating, a maximum of 7-9 headings should suffice.

HTML example

<h1>Local Weather</h1>
 <h2>Today's Forecast</h2>
 <h2>Tomorrow Forecast</h2>
  <h3>Tomorrow's Allergy Forecast</h3>                        
<div class="heading">Local Weather</div>
<div class="subheading">Today's Forecast</div>
<div class="subheading">Tomorrow Forecast</div>
<div class="subheading2">Tomorrow's Allergy Forecast</div>                        

TESTING

 

Procedures
  1. Activate a screen reader.
  2. Examine each page/screen and locate any visual headings/headers.
  3. Determine if headings/headers are possible in the platform.
  4. Verify that there are actual heading/headers.
  5. Verify that headings/headers are announced by a screen reader.
  6. Verify that all headings are logically structured. This is for HTML content only.
Results

Check that the following are all true:

  • All visual heading/header elements are represented as headings/headers (within the limited imposed by the platform);
  • All headers are logically structured (HTML content only).