Web accessibility has never been more important than it is in modern times. With almost the entire planet being connected by some digital device, whether laptop or phone, it has become essential to ensure that your website is usable by everyone, including individuals with disabilities. By making your site accessible, you comply with modern standards like the Web Content Accessibility Guidelines (WCAG), but more importantly, you create an inclusive user experience.
One of the simplest and most effective ways to enhance accessibility is through the use of semantic HTML elements. These elements provide browsers and assistive technologies (screen readers) with information about the meaning and structure of your web pages.
In this article, I will break down the most commonly used HTML tags that are used to provide this contextual meaning to browsers and readers.
What is semantic HTML
Semantic HTML refers to HTML elements that clearly describe their meaning in a way that both browsers and humans can understand. Unlike divs and spans, which are non-semantic elements, semantic elements like <article>, <header>, and <nav> tell you what type of content they contain.
This not only improves the structure of your website but also makes it easier for screen readers and other assistive technologies to navigate and interpret your content.
Why semantic HTML matters for accessibility
Semantic HTML plays a critical role in enhancing accessibility for a few reasons:
Screen readers: People with visual impairments often rely on screen readers to interact with websites. Semantic elements provide meaningful context to these assistive technologies, enabling users to better understand your content.
Keyboard navigation: Many users with motor impairments navigate websites using only a keyboard. Semantic HTML helps define logical tab order, ensuring that users can navigate smoothly with a single keystroke.
SEO: Search engines favor semantic HTML because it helps them understand your content better. Improved SEO often leads to a better user experience, and making your website more accessible can improve its visibility on the various search engines.
Simplifies ARIA usage: While ARIA (Accessible Rich Internet Applications) roles are important, they should be used to supplement, not replace, semantic HTML. ARIA can become complex and difficult to maintain if overused, but semantic HTML simplifies things by providing built-in accessibility that every browser can understand.
Key semantic HTML elements
Let’s dive into some of the most important semantic elements and how they contribute to an accessible web experience.
1. header
<header>
<h1>Accessible Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
The <header> element defines the introduction to a section or to the top of a page. It typically contains navigation links, a site logo, or other introductory content.
Screen readers use this element to identify the start of a section. If your site’s navigation is in a <header> element, users will know they are interacting with the main menu and not the content area or even a secondary menu that isn't meant to be a part of the main navigation.
2. nav
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
The <nav> element is specifically designed for navigation links. These are links that typically appear at the top of your page, or even in some hidden drawer menu that pops out to users.
By using <nav>, screen readers immediately understand that the content within it provides navigation for the website. This is crucial for users who may not be able to see the page but need to find their way around it easily.
3. main
<main>
<article>
<h2>Main Article</h2>
<p>This is the main content of the page, providing users with valuable information.</p>
</article>
<aside>
<h2>Sidebar</h2>
<p>This is supplementary content related to the main article.</p>
</aside>
</main>
The <main> element represents the dominant content of the <body>. It should not contain content that is repeated across pages, such as headers or footers.
By clearly marking the main content, you help screen readers skip over repeated elements and get straight to what they need. This also improves keyboard navigation for those using the tab key to move around the page.
4. article
<article>
<h2>Main Article</h2>
<p>This is the main content of the page, providing users with valuable information.</p>
</article>
An <article> represents a self-contained piece of content that can stand alone, such as a blog post or news article.
Screen readers can treat each <article> as an individual unit, improving readability and user comprehension. For users navigating via keyboard, <article> elements can also help in quickly jumping between different pieces of content.
5. section
<main>
<!-- First Section of Content -->
<section>
<h2>Welcome to Our Accessible Website</h2>
<p>This section provides an introduction to our website and explains our mission to create an inclusive experience for all users.</p>
</section>
<!-- Second Section of Content -->
<section>
<h2>Our Services</h2>
<article>
<h3>Web Development</h3>
<p>We specialize in creating accessible and user-friendly websites that meet the latest web standards.</p>
</article>
<article>
<h3>Consulting</h3>
<p>Our consulting services ensure your site meets WCAG guidelines and improves usability for all audiences.</p>
</article>
</section>
The <section> element is used to divide content into thematic groups. It’s similar to <div> but carries more meaning.
For accessibility, <section> elements break down content into logical, digestible parts. This helps users, especially those using assistive technologies, to navigate between sections more intuitively.
6. footer
<footer>
<p>© 2024 Accessible Web Co.</p>
</footer>
</body>
The <footer> element typically contains meta information, copyright details, or links to privacy policies and other legal disclaimers.
Like <header>, the <footer> helps users identify the end of the main content area. It provides essential information without mixing it with your primary content, making navigation easier for everyone.
7. aside
<article>
<h2>Main Article</h2>
<p>This is the main content of the page, providing users with valuable information.</p>
</article>
<aside>
<h2>Sidebar</h2>
<p>This is supplementary content related to the main article.</p>
</aside>
The <aside> element contains information related to the main content but not essential to its comprehension. Think of it as a sidebar.
By using <aside>, you help screen readers and users distinguish between primary content and supplementary material. This makes it easier for them to focus on what's important without distraction.
8. form
<!-- Accessible Form -->
<form action="/submit" method="POST">
<!-- Grouping personal information fields -->
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required="true">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-required="true">
</div>
</fieldset>
<!-- Grouping message section -->
<fieldset>
<legend>Your Message</legend>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required aria-required="true"></textarea>
</div>
<div>
<label for="contact-preference">Preferred Contact Method:</label>
<select id="contact-preference" name="contact-preference">
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
</div>
</fieldset>
<div>
<button type="submit">Submit</button>
</div>
</form>
Forms are one of the trickiest areas for accessibility, but proper usage of the <form>, <label>, and <fieldset> elements can greatly improve user experience.
Forms are interactive by nature, and users with disabilities must be able to navigate them easily. Proper labeling of form elements using <label for=""> ensures screen readers can match input fields with their descriptions. Grouping related form elements within <fieldset> tags provides additional clarity as well.
Forms that are missing this critical information make it almost impossible for screen readers to provide valid feedback to users in need of it.
Best Practices
Now that you know the most critical semantic HTML elements for accessibility, let’s look at some best practices for implementing them effectively.
1. Use tags wisely
Tags like <header>, <nav>, <main>, and <footer> help users understand the structure of your website. Use them consistently across pages so users, especially those navigating via assistive technologies, can easily orient themselves.
2. Always include alt text for images
Though alt text isn’t a semantic HTML element, it’s vital for accessibility. Use descriptive alt attributes for all images, providing context to visually impaired users who rely on screen readers.
3. Ensure proper heading hierarchy
Properly nesting headings <h1> through <h6> helps screen readers understand the content’s structure. The hierarchy should be logical, starting with <h1> for the main title and progressing down the hierarchy.
4. Avoid using non-semantic elements
Where possible, avoid non-semantic elements like <div> and <span> unless they serve a specific design purpose. These elements don’t provide meaning or context to assistive technologies.
5. Use ARIA sparingly
While ARIA roles can fill gaps in native HTML accessibility, they should be used sparingly. Semantic HTML should always be your first choice, with ARIA used as an enhancement, not a replacement.
Conclusion
Improving web accessibility with semantic HTML is an important step in making your site usable for everyone. Not only does it enhance the experience for users with disabilities, but it also benefits SEO, helps with content organization, and boosts overall usability.