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:
|<article>||Independent, self-contained content|
|<aside>||Content aside from the content it is placed in and indirectly related to the surrounding content (i.e., a sidebar)|
|<figcaption>||Caption for a <figure> element|
|<figure>||Self-contained content such as photos, illustrations, etc.|
|<footer>||Footer of a web page or section|
|<form>||Form for user input|
|<h1> to <h6>||HTML headings|
|<header>||Header of a web page or section|
|<main>||Main content of a web page|
|<ol>||Ordered list (i.e., numbered list)|
|<section>||Section of a web page|
|<ul>||Unordered list (i.e.,bulleted list)|
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.
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> <h3>Commercial</h3> <h3>Industrial</h3> <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>.
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.
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.
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.
Please complete all fields.
Is Your Lack of Website Accessibility Causing a Perfect Storm?
If you really care about the success of your business, you must not forget the most important question of all: Is my website accessible to all users? Neglecting the accessibility of your website will end up being nothing more than the perfect storm.
Why Using Automated Tools for Testing Web Accessibility Is Not Enough
When it comes to web accessibility, businesses want to know what’s wrong with their website and what they need to do to fix it. Fortunately, there are plenty of great accessibility tools available.
Domino’s Accessibility and What it Means for Businesses
Will Robles be able to order Domino’s pizza as conveniently as everyone else? The answer to this is pending the court’s final decision.