DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Importance of Headings

Importance of Headings

Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.

Screen readers and other assistive technologies pay attention to the DOM structure. The way your content is structured defines how screen reader users perceive your content.

Headings have a default styling. If you're not happy with it, change the styling with CSS instead of using a different heading that has the style you want.

When opening a web page, users without visual constraints can immediately absorb much of the information about the page layout without having to read the entire content.

Screen reader users, on the other hand, must listen to the headings (if they are well structured) to understand parts of the content. Therefore, it is important to make the headings concise and informative.

Access headings with screen reader

Screen reader users use keyboard shortcuts to navigate through the heading structure of a document.

They can list all headings, as in a tree view or a flat list, depending on the screen reader, as well as sort the headings alphabetically or even display only headings at a particular level.

Screen readers allow the user to navigate from one heading to the next, or only to headings at a particular level.

List of headings when using VoiceOver on MacOS in Safari.

I am using VoiceOver on the MacBook Air. I tried it in Safari, Chrome and Firefox, it worked the same everywhere.

Methods Β Screen Reader Browser Command
List all headings VoiceOver Safari Control + Option + U (to open rotor*), then use upper/lower arrows to select a heading
Only show specific headings in list VoiceOver Safari when in list, press 1-6 for the heading level to be filtered
Navigate from heading to next within page VoiceOver Safari Control + Option + Command + H

* with left/right key you can switch between lists, like links, forms, headings, etc.

List only showing Headings Level 2

Best practice

  • Heading is accurate and informative
  • Heading text is concise and brief
  • Headings convey a clear and accurate structural outline of the sections of content of a web page
  • Headings do not skip hierarchical levels
  • Start the main content with an h1 and only use one h1 on a page
  • Bonus: Right usage is also good for SEO πŸ˜‰

Exception to some of these points could be:

  • Modals/Overlays: Could have "h1" which shouldn't be a problem as it will be displayed at the top of the main page and only the modal or main page should be available at any one time.
  • Blog articles: If you have multiple blog articles on a page, each title may be an "h1".

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.