Accessible Semantic Structure: Headings

The semantic structure of a web page plays an important role in making a website accessible. In fact, we consider well-structured, accessible semantic HTML to be the foundation of a great website. In construction, the foundation holds the structure above it and keeps it upright. A structurally sound foundation provides the support needed to ensure safety for everyone. A poorly constructed foundation is dangerous for both the building’s occupants and the surrounding area.

Now imagine your website as a building with the semantic structure being your website’s foundation. An accessible semantic structure will result in a website that can provide accessibility, regardless of its size and complexity. Without a structurally sound semantic foundation, the accessibility of your website will fall apart as it grows. Setting the correct structure in the beginning of development (during the design stage) allows your website to stay accessible as it expands.

Just as we would consider it common-sense to have a strong foundation for a stable building, semantic markup should be the common-sense of HTML. Unfortunately, too often, that’s not the case. This is mainly due to uneducated developers, and we hope to change that. We feel all developers are required to understand HTML semantics and, consequently, how to create accessible websites and provide heading accessibility. These elements serve as a backbone of the page content. Accessible headings empower users to scan the page and gain a clear understanding of its content.

What is HTML Semantic Structure?

In order to understand how to write semantic code, we must first understand how code works and how both individual users and assistive technology will read it. Let’s take a step back and explain what semantic elements are. W3Schools defines semantic elements as “elements with a meaning.” So if an element is semantic, it’s meaning is clearly defined to browsers and developers. The following table includes examples of commonly used semantic HTML elements along with their natively defined purposes:

Since natively defined elements present themselves to assistive technology with a defined purpose, think of them as the instructions for how to use the page. As we see defined in the above table, <h1> to <h6> elements are designated as headings. Both web browsers and assistive technologies, such as screen readers, use headings to navigate a web page, thus making it vital to use them correctly.

The importance of an accessible heading structure

In terms of digital accessibility, headings are critical for users relying on assistive technology. Accessible headings help them to understand and navigate web pages and documents. A logical structure will also make your content accessible to everyone.

Heading hierarchy

Using accessible heading elements includes proper nesting by level, with <h1> being the most important heading and <h6> being the least important heading. The <h1> provides the overall topic for the page. Only one <h1> should be used per page and all of the page content should relate to this topic. <h2> elements are subheadings of <h1> elements. <h3> elements are subheadings of <h2> elements, and so forth.

In the sample accessible heading structure below, Types of Construction is the main topic. Private, State, and Federal are subtopics of the main topic. Likewise, Residential, Commercial, and Industrial are all subtopics of the subtopic Private.

<h1>Types of Construction</h1>
There are different types of construction.
<h2>Private</h2>
There are three types of private construction.
<h3>Residential</h3>
Residential construction includes personal homes.
<h3>Commercial</h3>
Commercial construction includes buildings for businesses.
<h3>Industrial</h3>
Industrial construction includes factories.
<h2>State</h2>
State construction includes construction commissioned by a state governmental entity.
<h2>Federal</h2>
Federal construction includes construction completed on federally owned land.

The structure of the accessible heading elements clearly provides appropriate meaning to the content of the page. Because proper and accessible HTML semantics are used, the headings can be used by assistive technology to allow blind or otherwise visually impaired users to enjoy a respectively similar experience as a sighted user.

Take notice that we use heading levels in the correct order. If we skip heading levels, we will cause confusion. For example, if we follow an <h1> with an <h4>, users may think they missed important content. However, it is okay to skip backward to bring users back to the flow of the page. We see this in the above example when we go from an <h3> back to an <h2>.

Heading styles

Be careful not to take advantage of native or custom CSS styles simply for visual purposes. Earl Childs, director of new construction at Cortland, a multi-family construction and renovation company, brings up a good point about design. He says,

“When you think about it, everybody wants to hurry up and get things done that can be seen so they don’t spend enough time building a good, strong, solid, well-built foundation. If we spend more time getting the foundation right, even if it is never seen, we will always have a better product at the end of the day. Also, it’s really hard to go back and repair a poorly built foundation after the product is built. This is true in everything we do.”

We agree and find this statement true for many designers. They want to quickly provide something that their client can visually see to show their progress. Without considering the underlying structure, they use heading elements to give the text a desired appearance. Instead, we need to spend more time on using the correct foundation (semantic structure) and then use a cascading style sheet (CSS) to apply styles to match the design.

Consider the way a sighed user scans a web page for content by scrolling through a web page. They look for bold or larger text relating to what they are looking for. A blind user will often use the same technique to scan a page looking for heading text by using a shortcut such as the H key on their keyboard to quickly navigate through the headings of a page.

By default, a first level heading (<h1>) is styled as the largest heading, and a sixth level heading (<h6>) is styled as the smallest heading. Visually, these styles outline the hierarchy of the page’s content. Similarly, for a non-visual user, the HTML heading level is declared and provides the outline for the page content hierarchy. Using CSS, we can style headings with decorative elements such as borders, background colors, text-shadows, etc. Proper semantics combined with creative CSS allows our heading structure to provide an accessible experience for both visual and non-visual users.

How web accessibility benefits business owners

If you are a business owner, you may be familiar with the term bounce rate. The bounce rate of a website is the version of a metric that measures the rate of how long users stay on a website. Unlike conversion rates that we want to be high, our goal is to have a lower bounce rate. Following the web accessibility guidelines can significantly contribute to reducing this rate. The lower the bounce rate, the better, because it means people are staying on the website longer. This is often adhered to within various web entities and is incorporated within their policies pertaining to user retention.

On the contrary, a higher bounce rate indicates a poorly constructed site version, particularly if it fails to meet web accessibility standards. A website that ignores the importance of accessibility and lacks necessary elements would fit this description perfectly. Elements of a poorly constructed site include things like non-responsive design, lack of color contrast, and missing form labels.

Our primary aim is to keep people on our website longer so that they discover more reasons why they should choose us over our competitors. A study found that a staggering 71% of disabled web users will leave a website version that does not fulfill accessibility requirements. This is a large enough percentage to significantly impact the overall bounce rate. Hence, all business entities must incorporate accessibility requirements into their policies to avoid a potential loss of customers.

How web accessibility benefits developers and Google

If your web developer argues that web accessibility does not benefit them, then it may be time to seek services elsewhere. The value of web accessibility for developers, especially in today’s digital version of the age, is undeniable. Developers take pride in crafting high-quality websites and understand that cleaner code paves the way for a faster and more proficient website. If a website’s load time is slow or it fails to rank high in search results, the development team is usually held accountable. HTML elements (code) have semantic meaning, and web entities optimize their website’s accessibility and performance by using code as intended.

Apart from reducing bugs and enhancing loading speed, semantic code also aids search engines such as Google and Bing in indexing the content, thus facilitating higher search rankings. Let’s imagine a webpage version constructed to compare web development platforms like WordPress and Shopify and how its organization of content using heads and visual elements can increase its potential visibility.

Why accessibility is greater than compliance

Accessible heading structure is a good example of why accessibility is greater than compliance. If you are striving to provide a website that is compliant with the Web Content Accessibility Guidelines (WCAG) without focusing on the actual accessibility of the website, there is a good chance you will miss the mark.

WCAG on Headings: Success Criteria 1.3.1 Info and Relationships

WCAG success criteria 1.3.1 Info and Relationships requires that structure conveyed through presentation can be programmatically determined. This means that if text is styled larger to make it visually obvious as a topic, the same information is presented to screen readers. Using HTML heading elements allows this so all is good, right? It is only good if you are only concerned with compliance and not actually dedicated to making an accessible website.

WCAG does not say you are required to use headings nor does it constitute a WCAG failure if you do not use them in the correct order. Using headings is a technique used to accomplish success criteria 1.3.1’s objective, and it is possible to style a page without using HTML headings, but why would you? It is best practice to at least include an <h1> on every page. Likewise, if you are going to use headings, why would you use them out of order? The only excuse we’ve seen for this is to accomplish a particular visual appearance, and we’ve already explained the correct way to accomplish visual designs.

WCAG success criteria 2.4.6: Headings and Labels

WCAG success criteria 2.4.6: Headings and Labels requires using headings and labels that describe a topic or purpose. Similar to success criteria 1.3.1, 2.4.6 does not require the use of headings and labels. Instead, it says that if you do use them, use them correctly.

We recommend headings that are informative and concise. The following are examples of poor, better, and best first level headings for the construction heading layout we shared above:

• Poor: Construction is Great!
  Judging by the subheadings of the page, this does not clearly define the purpose of the article.
• Poor: Building Construction Encompasses Various Industries Including Both Public and Private Industries. Learn More About the Variations in Building Construction.
  While this heading does describe the purpose of the article, it provides too much information to be considered concise.
• Better: Construction
  The page is about construction; however, for such a broad topic, we should provide a little more detail.
• Best: Types of Construction
  The heading clearly describes the purpose of the page. Someone interested in learning about the various types of construction would be most likely to read this article as opposed to the other examples.

Summary

Whether you are building a commercial apartment complex or a website for your business, start with a strong, firm foundation. This prevents having to repair poorly built products. For the best accessibility of page navigation, we recommend using HTML headings. Use them in the correct order, make sure they are clear and concise, and use CSS to style them as needed.

If you’re still confused about how to create an accessible heading structure on your website, let us know. We offer free web accessibility consulting options to help get you started on your next accessible web development project.