Headings, Labels, Page Titles and Creating a Logical Reading
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.
This means that headings need to be properly tagged and nested in the markup, using semantic markup such as <h1>, <h2>, <h3>, <h4>, etc.
Headings should primarily be used to describe larger sections of content.
Headings should not be applied to text labels and links that are just 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>