Web Page Headings

It has been some time since our last post on the topic, "First Steps to An Accessible Website" and we are happy to be able to turn our attention once again to this topic!

In Part 1 we discussed having an Accessibility Statement on your website. In Part 2 we covered making sure that images on your website have an appropriate ALT attribute. In Part 3 we introduced the often-overlooked LANG attribute and why it matters.

Next up is the use of H tags (AKA heading tags). Headings on a webpage or not meant for visual styling. Headings play a critical role for users of assistive technology and are one of the easily discoverable "issues" that is identified by accessibility scanning tools.

HTML headings are used to convey the document structure of a web page just as an outline would organize a report and help the user understand the relationship of the content to each other.

In HTML there are six level of headings. These are represented in code as H1 thru H6. For example:

<h1>This is a heading level 1</h1> <h2>This is a heading level 2</h2> <h3>This is a heading level 3</h3> <h4>This is a heading level 4</h4> <h5>This is a heading level 5</h5> <h6>This is a heading level 6</h6>

When rendered by the browser without any styling applied, these heading levels will appear as:

This is a heading level 1

This is a heading level 2

This is a heading level 3

This is a heading level 4

This is a heading level 5

This is a heading level 6

The H1 tag is used to identify the start of the main content on a page and each additional heading level (H2 thru H6) is used to outline the rest of the content. More on that in a moment.

Why Important

When a page properly uses headings, a sighted user can easily scan the page to get an overview of what the page includes and quickly find what they want on the page. This often comes second nature to the sighted user without them ever thinking about headings. A non-sighted user is not able to do this unless the page makes proper use of headings at the source code level. Using headings properly allows screen reader users to understand the structure of a document and construct a 'mental model' of its outline.

Some of the benefits of properly using headings on a web page include:

Understanding page structure and relationship of content at a glance
Easier navigation and understanding of structure for assistive technology users
Reduced risk of an accessibility legal complaint
Search Engine Optimization (SEO) benefits
A more user-friendly website

The misuse or lack of use of heading tags is almost always included in accessibility legal complaints as a reason why the site is not "ADA Compliant". This means using headings properly on your web pages can help reduce the risk of a drive by legal complaint and, more importantly, help to make your website accessible to users of assistive technology!

Common Heading Mistakes

Headings have been a part of HTML for a long time. Yet many webpage authors seem to not fully understand the purpose of headings or how to properly use them. Here are several common mistakes to avoid:

Using Heading Tags Only for Styling

When headings are used on a webpage, browsers apply default styling which is to bold the text and make it larger than the page text. The default font size applied to the heading will gradually be decreased from the H1 heading tag down to the H6 heading tag. This has led to many web page creators to ignore the logical use of heading levels and focus only on using the H tags for visual styling rather than its intended purpose.

A skilled web page creator understands the benefits of separation between content (HTML) and styles (CSS). Doing so allows a document to be quickly reformatted for different purposes, or a style to be re-purposed across multiple pages. To this point, never use H tags for styling. Always use headings to outline page structure and relationship of content on the page and then style those heading tags using CSS.

Failure to Use Headings

You have likely seen web pages that appear as a “wall of text”. The pages are not only hard on the eyes but are overwhelming and not easy to understand. If you have encountered this type of page content, you now have an idea of how a screen reader may feel when headings are not used on a page. Failing to provide headings on a webpage is not a good idea from an accessibility, general use, and SEO perspective.

Applying Styling Only

Often pages will include text that is visually styled as headings but is not programmatically identified as headings. This shows that the page author understands how to structure their content and how to use CSS, so the page makes sense visually, yet they do not understand the impact of not using the H tags at the source code level. As already mentioned, H tags provide the same benefits to assistive technology users as visual users, increase search engines optimization and reduces the risk of an accessibility legal complaint.

Ignoring the Hierarchy of Heading Tags

As already mentioned, heading tags provide an outline of the page content and how that content is related to each other. This means that the H1 through H6 tags should be used in a hierarchal manner. For example, following an H2 tag with an H4 or H5 instead of an H3 tag would not be correct as it breaks that hierarchy. This is not only confusing for users who are relying on the heading tags to understand the relationship of the content, but it is also bad for your SEO rankings.

Best Practice

It was stated that an H1 tag should identify the start of the main content on a page. Does that mean that a page needs to start with an H1 tag? No. In fact you can start a page with any level of heading tag as long as you follow the proper hierarchy from that point forward. Does that mean you should start a page with an H3, H4, H5, or H6 tag? No. Let me explain.

While the HTML and WCAG specifications do not require a page start with an H1 tag or that an H1 tag even be used to identify the main content on the page, it is considered a best practice to use the H1 tag for the start of the main content. On many web pages there may be content that comes before the start of the main content, such as navigation, secondary information not related to the main content, etc. As a best practice identify this type of content using an H2 tag when headings are being used. For example, on an e-commerce site there may be a section for “Promotions” and “Recommendations” that appears in the document before the main content. The headings tag on the page may appear as:

- H2 – Promotions
- H2 – Recommendations
H1 – T-Lo Brand Aggressive Hair Products
- H2 – Details
- H2 – Sizes
- H2 – Delivery
  - H3 – Ship to Me
  - H3 – Pick Up in Store
- H2 – Product Reviews
- H2 – [Footer Details]

This "best practice" approach focuses on using an H2 tag to identify content that uses headings before the main content. The H1 tag is then used to identify the start of the main content. Remember to follow the proper hierarchy of headings to represent the structure and relationship of content. There are other aspects that can be considered when it comes to the use of headings, such as using descriptive headings and how sections may impact heading structure. Those are beyond the focus of this post. If you want to explore these topics here are some resources:

W3 Schools – HTML h1 to h6 tag:

https://www.w3schools.com/tags/tag_hn.asp

HTML Specifications on Headings:

WCAG 2.1 Success Criteria

Interesting Blog Post on Headings

Blog Post - Heading Tag SEO: It’s All About the Outline (and the Audience)

https://www.mediavine.com/heading-tag-seo/

Blog Post - The Document Outline Dilemma

https://css-tricks.com/document-outline-dilemma/

WebAlign

Accessibility and WCAG can be difficult to grasp. While there is no quick-fix solution to accessible content, there is a simpler approach! Do any of the follow apply to you?

I want to make our website compliant with WCAG ASAP
I am not worried about compliance but want an accessible product
I want to learn about WCAG and how to apply it
I need to train my team on web accessibility fast

Web Accessibility does not have to be hard. That is where WebAlign can make a difference!

WebAlign is a compliance resource that helps everyone in the web development lifecycle understand what WCAG requires and how to apply the accessibility concepts according to their job role. WebAlign allows teams of any size to easily incorporate accessibility into their process and help ensure that existing and newly created content is made accessible and remains accessible. WebAlign is more than just a compliance resource, it can be used as a training tool and an outside vendor requirements tool. Using WebAlign demystifies web accessibility by making it easier to understand and apply. WebAlign removes the confusion and the pain of creating accessible content.

Thanks for reading! In my next post I will continue to focus on other common and basic accessibility issues that can present a barrier to users and expose your site to those drive-by legal complaints.

Want to See More Content Like This?

Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!

We're Here to Help When You're Ready

Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.

First Steps to an Accessible Website (Part 4)