Web accessibility and headings
Web accessibility has always been a requirement for UMaine websites, and Digital Communications has been increasing efforts to improve the accessibility of web content on umaine.edu. The term “accessibility” refers to our efforts to remove barriers that prevent access to websites by people who have a disability. This month, we discuss how you can use headings in your web content to benefit both web accessibility and search optimization.
Headings are usually larger in comparison to the overall text of a web page, and in the UMaine website these display as blue text in the “Roboto slab” serif font. All pages in the UMaine website have at least one web heading, the name of your website is the top heading for every web page. Headings within your web content are considered sub-headings, and follow a hierarchy of h2-h6 (h1 being your site name as the top heading). By default, most web pages display the name of the web page as the h2 sub-heading, though pages using content blocks do not display this unless you add a heading block.
Headings can benefit all readers
Headings help organize a web page and give all readers a sense of its structure. Many web readers are scanning your pages quickly, and headings can help them find a section of information on your page more easily.
Headings can benefit the visually impaired
Readers who rely on screen readers can navigate a page according to its headings— they can listen to a list of headings on a page, and skip to a heading to read the section underneath. In fact, almost 70% of screen reader users prefer to use headings on a page to read content (2017 WebAIM survey).
Headings can benefit your content in search engines
Adhering to accessibility best practices is helpful in many ways, including how your website content is found in search engines. These services will pay attention to the headings on your web page in order to better characterize content. Using headings in your content can drive more traffic to your web pages for this reason.
How to use headings
As mentioned earlier, headings follow a hierarchy with sub-headings h2 – h6 underneath the page’s h1 heading. The most important topic of the page should be the h2 heading, and sub-sections should be h3 headings within the page. If a page has multiple to-level topics on your website, it is appropriate to have multiple h2 headings for each of these main topics. Sub-sections within an h3 heading would be h4 headings, and so on.
Important: Do not skip levels of headings; you should not have an h4 heading on your page unless there is an h3 heading earlier in the page (and that h3 heading should have the page title’s h2 heading above it). Think of headings as the outline of your page, where you can jump “back” to a higher level heading when the topic changes. Here is a visual example:
H1: Name of your website (controlled by UMaine design)
- H2: Name of your web page
- H3: Sub-topic on this page
- H3: Another sub-topic on this page
- H4: Sub-topic of this sub-topic
- H5: Sub-topic of this sub-topic
- H4: Sub-topic of this sub-topic
- H3: Another sub-topic of this page
…and so on. Very rarely are the h5 and h6 headings used (typically in very long, complex pages).
What not to do
- Do not use headings to make a paragraph of text stand out. Instead, put a heading over the text to characterize it better.
- Do not use bold instead of a heading. Both screen readers and search engines will not recognize this as a heading, and the benefits of having the heading are diminished.
If you have any questions about web accessibility, or want to see us cover an accessibility topic in a future newsletter, please get in touch with us at um.weboffice@maine.edu.