Create a logical reading order

Page structure and headings

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.

Create a logical reading order by using properly nested headings in your markup, <h1> <h2> <h3> <h4> <h5> <h6>.

• There should only be one <h1> heading per page - the title.

• Headings should be structured in a hierarchical manner.

Descriptive headings

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.