Headings (this is an H1)

  • Benefits of Headings (this is an H2)

    Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities.

    If the underlying code for a page's headings is correct, screen reader users can also benefit from headings. Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to a desired heading to begin reading at that point. Screen reader users can use headings to skip the repeated blocks of content like headers, menus, and sidebars, for example.

    In 2017, WebAIM asked how screen reader users preferred to find information on lengthy web pages. Almost 70% of respondents said they preferred to use headings on a page. Clearly, organizing pages using headings is one of the best accessibility strategies available.

    Using Headings (this is an H2)

    Headings are ranked <h1> through <h4>. Use headings hierarchically, with the <h1> representing the most important idea on the page, and sub-sections organized with <h2> level headings. Those sub-sections can themselves be divided with <h3> level headings, and so on.

    It is best to plan out a heading structure before composing a page. Doing so will help you both select appropriate heading levels and keep your thoughts organized overall.

    All pages should at least have a <h1> level heading giving the title of the page. (In Web Community Manager, showing the app name is coded as an H1.)

    Do not skip heading levels such as from <h2> to <h4>. It is permissible to skip headings in the other direction if the outline of the page calls for it (for example, from <h4> to <h2>).

    Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy. You can then change the size and weight using the feather and bold buttons.

    Do not use bold instead of a heading. One of the most common accessibility mistakes is making text bold when a heading is needed. Though the text may look like a heading, the underlying code is not set correctly, and screen reader users will not benefit.

    Do not overuse headings. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> or <hr> rank. 

    Source: Yale