Headings

Use headings for structure, not styling. Headings are used to separate content on a web page into meaningful sections. They give structure to a page and simplify page readability.  Site visitors look at headings when scanning a page for content. They can easily determine where new topics are introduced and find what they’re interested in. Headers describe what’s on your page, so make sure they’re descriptive and compelling. Well structured headings also improve search engine optimization.

• Well-written headings are an important tool for helping users scan quickly.
• The ability to scan quickly is particularly important for older adults because they tend to stop scanning and start reading more frequently. If headings are not descriptive or plentiful enough, the user may start reading in places that do not offer the information they are seeking, thereby slowing them down unnecessarily.
• Use Unique and Descriptive Headings – ensure that headings are descriptive and relate to the content they introduce. If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference.

Heading Hierarchy & Best Practices

Headings must follow a logical order to be compliant with web accessibility requirements. There are six different levels of headings: H1, H2, H3, H4, H5, H6. A heading 1, or H1, is the largest and most important heading. An H6 is the smallest and least important heading.

Page Title / Heading Level 1 (H1)

• Most web pages should start with an H1. In the School of Medicine web system, the page/post/event Title is automatically styled as an H1 for you.
• The H1 (page title) should contain the overarching concept for the page.
• An H1 should only be used once on a page.
• An H1 should not be used in the main content area.

Main Content Area

• The H2 through H6 headings should be used in the main content area.
• Headings should be used in descending order. For example, the first header used in the main content area should be an H2. If you wish to follow the H2 with a subheading, use an H3. If you wish to follow the H3 with a subheading, use an H4 and so on.
• Heading order is a WCAG criteria: the heading elements should be organized in descending order without skipping a level, meaning that an h4 should only come after an h3. Skipping heading levels will cause screen reader users to wonder if content is missing.

Visual Example

The following is a visual example of how to properly order headings.

Screen Readers

HTML headings serve two purposes for non-sighted users:

1. They provide an outline of the page, so visitors can understand how the page is structured, and how all the sections relate to one another.
2. They allow users to jump to specific areas of a page without having to read through the entire page.

Heading Styles

Headers in the School of Medicine web system have already been styled to ensure adequate color contrast and font size for readability purposes. All our site editors have to do is properly apply the headers in their web site content using the accessibility guidelines above.

• Do not use a header based on how it looks visually (e.g.: size). Headers used out of order can confuse screen reader users.
• Never use text styles (bold, italicize, underline, etc.) in lieu of headings. This removes key functionality that screen reader users depend on. One of the most common accessibility mistakes is making text bold instead of properly using a header.

Accessibility Videos

Resources

• WebAIM: Semantic Structure: Regions, Headings, and Lists
• World Wide Web Consortium (W3C): Headings