Headings, Labels, Page Titles and Creating a Logical Reading
- Christina Lutz-Hatfield
Â
Table of Contents
Overview
Create a logical reading order for vision impaired users who rely on using assistive technology such as a screen reader to access online content.
Provide screen reader users with properly nested headings.
Screen reader and other assistive technology users frequently navigate web pages by heading structure.
These users can pull up a list of all the headings on a page to get a quick overview of the type of content that is available.
Headings should primarily be used to describe larger sections of content.
Headings should not be applied to text labels and links that are bolded and do not describe a section of content.
Each web page should have a meaningful page title.
Headings and labels should be descriptive.
Form input controls should have labels that clearly describe the content that is expected to be entered. This helps users know how to successfully complete the form.
Page Structure and Headings
Â
Create a logical reading order by using properly nested headings in your markup, <h1> <h2> <h3> <h4> <h5> <h6>.Â
Build the structure of the page using semantic markup. Markup that has meaning to browsers and screen readers. A web page should be able to stand on its own without the help of a style sheet.
Sighted users often scroll the page quickly and look for headings to get an idea of the structure and content of the page. Screen reader and other assistive technology users also have the ability to navigate web pages by heading structure, assuming true headings are used (as opposed to text that is styled to be big and/or bold). This means that the user can view a list of all of the headings on the page, or can read or jump by headings, or even navigate directly to top level headings (<h1>), next level headings (<h2>), third level headings (<h3>), and so on.
There should only be one <h1> heading per page and should be applied to the page title to indicate to the screen reader user that this is where the content area begins.Â
Headings should be structured in a hierarchical manner.Â
Proper Nesting of HeadingsÂ
Â
<h1>Page Title</h1>
      <h2>Heading Two</h2>
            <h3>Heading Three</h3>
            <h3>Heading Three</h3>
            <h3>Heading Three</h3>
                  <h4>Heading Four</h4>
                  <h4>Heading Four</h4>
      <h2>Heading Two</h2>
            <h3>Heading Three</h3>
            <h3>Heading Three</h3>
            <h3>Heading Three</h3>
                  <h4>Heading Four</h4>
                  <h4>Heading Four</h4>
      <h2>Heading Two</h2>
            <h3>Heading Three</h3>
            <h3>Heading Three</h3>
            <h3>Heading Three</h3>
                  <h4>Heading Four</h4>
                  <h4>Heading Four</h4>                                                            Â
Provide Descriptive Headings and Labels
General Guidelines
Help users understand what information is contained in web pages and how that information is organized by providing descriptive headings.
When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily.
Descriptive labels help users identify specific components within the content.
Labels and headings do not need to be lengthy. A word, or even a single character, may suffice if it provides an appropriate cue to finding and navigating content.
Screen Reader Guidelines
Screen reader users frequently navigate web pages by heading structure. These users can pull up a list of all the headings on a page to get a quick overview of the type of content that is available.
This requires headings to be descriptive enough so that screen reader users can quickly get an overview of the type of content that is available on the page.
Please see more detailed information on how to comply with this guideline.
Lists
HTML lists such as <ul>, <ol>, and <dl> also convey a hierarchical content structure.
Lists should be used to display actual list items. They should not be used for layout purposes.
Page Titles
Each web page should have a meaningful page title.
Page titles help users identify and distinguish different pages.
Help users find content and orient themselves within it by ensuring that each web page has a descriptive title.
There are two different types of page titles:
Page titles that appear in the main content area and that are visible to sighted users.
Page titles that appear at the template level.
Page Titles in the Main Content Area
Following is an example of a page title in the main content area.
<h1>City Administrator</h1>
There should only be one <h1> heading per page and should be applied to the page title to indicate to the screen reader user that this is where the content area begins.Â
This creates a logical reading order for screen reader users.
Screen reader and other assistive technology users frequently navigate web pages by heading structure.
These users can pull up a list of all the headings on a page to get a quick overview of the type of content that is available.
Page Titles that Appear at the Template Level
Here is an example of what the page title in the markup should look like.
<!doctype html>
<html lang="en">
<head>
<title>Services at the Human Services Agency</title>
</head>
<body>
...
</body>
</html>Â
The page title should be incorporated at the very top of the page template.
This page title is not visible to a sighted user on the actual page. However, the title is announced by the screen reader.
These page titles identify the current location without requiring users to read or interpret page content.
When titles appear in site maps or lists of search results, users can more quickly identify the content they need.
User agents make the title of the page easily available to the user for identifying the page.
For instance, a user agent may display the page title in the window title bar or as the name of the tab containing the page.
In cases where the page is a document or a web application, the name of the document or web application would be sufficient to describe the purpose of the page.
In cases such as Single Page Applications (SPAs), where various distinct pages/views are all nominally served from the same URI and the content of the page is changed dynamically, the title of the page should also be changed dynamically to reflect the content or topic of the current view.
For each web page, provide a short title that describes the page content and distinguishes it from other pages. The page title is often the same as the main heading of the page. Put the unique and most relevant information first; for example, put the name of the page before the name of the organization. For pages that are part of a multi-step process, include the current step in the page title.
Example: Page Titles
Please see more detailed information on how to comply with this guideline.
Form Labels
Form input controls should have labels that clearly describe the content that is expected to be entered. This helps users know how to successfully complete the form.
Please see our forms section for more detailed information on how to meet this guideline.