Create Logical Headings

Transcript

Headings on a webpage are much more than a large and prominent font. Headings provide a visual hierarchy that breaks up content and allows a user to easily scan the page. However, unless the heading structure has been coded correctly the page hierarchy will be meaningless to non-sighted users

In this lecture I'll explain how to best structure a webpage using heading elements. I'll explain why headings need to be on every webpage, how you don’t need to use all of the headings to create a document hierarchy and understand the golden rule for headings which is do not skip heading levels.

At the end of this lecture you'll be able to use headings to provide a coherent structure to a webpage. You'll understand you don’t need to use all heading levels, and the heading levels you do use need to be applied in a sequence and that sequence not skipped.

think of headings as the webpage outline. Users who can see the headings can decided instantly if they wish to continue reading the page due to being able to quickly scan the heading levels.

When a page structure is coded correctly, screen readers and other assistive technology users can navigate the webpage by the heading level. Within the assistive technology users can list of all page headings, jump between heading levels and even navigate to specific headings.

If headings are used correctly the navigation of the hierarchy ultimately means users understand the structure of the page in a non-visual way.

There are six levels of headings available to structure the sections of a webpage. Even though six levels exist they don’t all need to be used, use as many heading levels as is appropriate.

Pages should apply headings in a logical order. A heading one <h1> is the most important and is the title of the page, think of it as the master heading for the document, and importantly a page must only ever have one heading level one element.

Following a heading one element is a heading two <h2>, heading three <h3>, <h4>, <h5> and <h6> with each level denoting a subsection of content from the previous parent heading level. Heading three content is the subsection of heading two content which is a subsection from the main heading one.

Before adding a new heading level decide if a new level is in fact appropriate. Is new content being introduced or is it a continuation of previous content and more detailed?

If it's new content, a further heading of the same level is probably more appropriate, if the new content is a continuation from the previous heading level and is more detailed again this is where you would step down to the next level in the sequence.

For example, if the previous heading level was two, and you had content which was more detailed but still part of the theme of the previous heading you would nest it under a heading three, as its related content and going into more detail.

Heading levels must always be used in sequence and skipping heading levels must be avoided. Screen reader users rely on the document structure to understand the page hierarchy, if levels are skipped it can make it difficult for a user to understand relationships. That said, the only time it is acceptable to skip heading levels is when closing a section. For instance, a heading two <h2> can follow a heading four <h4> when it is in a new beginning section.

Providing heading levels for webpages satisfies the HTML specific technique H42: Using h1-h6 to identify headings as a relationship has been established which is conveyed visually by a different font size and style and is programmatically identifiable as well using heading elements. Which means this passes 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text at level A.

I explained how heading elements provide a navigable hierarchy for screen reader and other assistive technology users. The heading elements must be coded correctly and in sequence otherwise the hierarchy will be difficult to understand.

Headings must be used in a logical order with heading one as the first primary page heading, followed by a heading two, three, four, five and six. Even though there are six heading levels they don’t all need to be used, use as many as is appropriate for your content.

This video is from our Introduction to Web Accessibility WCAG 2.1 Udemy course. The course is designed to teach you the fundamentals of web accessibility and how to apply those techniques to websites that you create. If you're interested in finding out a little more, checkout the link in the description below as well as links to a full transcript.

If you want to stay up to date with web accessibility and to learn cutting edge techniques, consider subscribing and click the bell icon to be notified when new videos are uploaded.