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 has the capability to 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.

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

Now that we know by using HTML heading elements we can provide a good semantic structure, we must be careful to use them correctly. Otherwise, what we thought would improve accessibility will do nothing more than create unnecessary accessibility barriers.

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 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 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 backwards 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 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 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. The lower the bounce rate, the longer people are staying on the website. 

On the contrary, a higher bounce rate indicates a poorly constructed site. A website that lacks accessibility would be considered a poorly constructed site. A poorly constructed website includes things like non-responsive design, lack of color contrast, and missing form labels.

Our goal 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 71% of disabled web users will leave a website when it is not accessible. This is a large enough percentage to have a significant impact against the overall bounce rate. Business owners must prioritize web accessibility to avoid 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 find a new developer as it is just undeniable how vital web accessibility for developers is, especially nowadays. Developers aim to create high quality websites and know that the cleaner the code is, the faster their websites will run. If a website’s load time is slow or a website fails to rank high in search results, the development team is responsible. Cleaner code means faster, high quality code. Semantically correct code is cleaner code. Accessible code is semantically correct. This means that code is written according to specifications. HTML elements (code) have semantic meaning. Developers optimize a website’s accessibility and performance by using code as it is intended. 

Aside from having fewer bugs and making a website load faster, semantic code also helps search engines such as Google and Bing to index the content and achieve higher search rankings. For example, let’s say that a web page is about comparing web development platforms such as WordPress and Shopify. The page visually uses headings to organize its content. The code of the page uses paragraph tags with classes (used for targeting styles) to create the visual appearance of headings like this:  

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 actual accessibility of the website, there is a good chance you will miss the mark.

WCAG 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.