It is important to logically organize your page and use header tags (h1, h2, h3, h4) to help screen reader users navigate your content. By using a proper heading structure a screen reader can skim and hear an outline of the page's main ideas, then backtrack to read the details of any section.
Like an outline, you should always start with the most important. The page title is a Heading 1 so start your content structure with a Heading 2. The next subsection under your Heading 2 will be a Heading 3. Do not skip levels — don't start with a Header 3, or go straight from a Header 2 to a Header 4. You can go from a Header 3 or a Header 4 back to a Header 2 when you switch broad topics.
Do not use headings to style text. Use style and font attributes such as bold and italics or Lead and Hero.
For hands-on training, you can sign up for one of our Web Express Core sessions we cover all the basic accessibility topics as users learn the basics of Web Express.
Format Headings Sections
- Select the text you would like to format by simply clicking inside the line you would like to format.
- In the Paragraph Format dropdown choose the appropriate heading style.
Note: The first heading on a page will always be a Heading 2.
Examples of Headings
Note: For screen reader users, header tags are vital in giving a sense of the main topics of the page and enabling easier navigation through your content. Think of your headers as a table of contents for your page making a scannable outline of your content is more accessible to everyone. Additionally, effective header tags also play a role in your Search Engine visibility.