In today’s world, it is crucial to design our HTML with accessibility in mind. By creating accessible HTML, we ensure that people with disabilities can use the Web without any barriers. This includes individuals who are blind or visually impaired, those with hearing loss, and those with various other disabilities. However, this topic often gets overlooked and doesn’t receive the attention it deserves.
Imagine someone who can’t see your page but still wants to consume its content. How do they do that? They use something called a “screen reader” instead of relying on visual cues. To get an idea of how a screen reader works, you can try the free ChromeVox Chrome Extension provided by Google. Accessibility also involves allowing tools to easily select elements or navigate through pages.
While accessibility may not always be the primary goal when building web pages or apps, it is possible to make them accessible after the fact. Although it’s better to prioritize accessibility from the start, it’s never too late to make improvements. In fact, in many countries, websites built by government or public organizations are legally required to be accessible.
When it comes to making HTML accessible, there are a few key factors to consider:
Use Semantic HTML
Semantic HTML is of utmost importance in creating accessible web content. It involves using the correct structure for heading tags, such as h1
, h2
, h3
, etc. The headings should be organized in a meaningful hierarchy, like a tree structure, where higher numbers indicate less important headings. In addition, it’s important to use semantic tags like strong
and em
instead of their visual equivalents, b
and i
, as the former carry more meaning.
Lists are also essential for accessibility. Screen readers can detect lists and provide an overview to users, who can then choose whether to explore the list further or not. Moreover, tables should include a caption
tag to describe their content in a concise manner.
Use alt
Attributes for Images
Every image should have an alt
tag that describes the content of the image. This is not only a good practice, but also a requirement of the HTML standard. Without the alt
attribute, your HTML would not validate. Additionally, providing alt
attributes for images can improve their visibility in search engines.
Utilize the role
Attribute
The role
attribute allows you to assign specific roles to various elements in your HTML. There are numerous roles available, such as complementary
, list
, listitem
, main
, navigation
, region
, tab
, alert
, application
, and many more. You don’t need to assign a role to every element on the page, as screen readers can often infer the role from the HTML tag itself. For example, semantic tags like nav
, button
, and form
already convey their purpose.
Using the nav
tag as an example, you can define page navigation as follows:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
If you’re unable to use the nav
tag and are forced to use a div
instead, you can still indicate its purpose using the navigation
role:
<div role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
As shown in this practical example, the role
attribute is used to assign meaning when the tag itself doesn’t convey the intended purpose.
Use the tabindex
Attribute
The tabindex
attribute allows you to customize the order in which “selectable” elements are navigated when the Tab key is pressed. By default, only links and form elements are included in tab-based navigation, and you don’t need to set tabindex
on them. However, you can make other elements selectable by adding tabindex="0"
to specify the order:
<div tabindex="0">
...
</div>
On the other hand, tabindex="-1"
removes an element from tab-based navigation, which can be useful in certain scenarios.
Utilize ARIA Attributes
ARIA (Accessible Rich Internet Applications) defines semantics that can be applied to elements to enhance their accessibility.
aria-label
The aria-label
attribute is used to add a string that describes an element. For instance:
<p aria-label="The description of the product">...</p>
In my blog’s sidebar, I use this attribute for the search input box since it lacks an explicit label but has a placeholder attribute.
aria-labelledby
The aria-labelledby
attribute establishes a correlation between the current element and the one that labels it, similar to how an input
element can be associated with a label
element. To use it, pass the ID of the labeling element:
<h3 id="description">The description of the product</h3>
<p aria-labelledby="description">
...
</p>
aria-describedby
The aria-describedby
attribute allows you to associate an element with another element that serves as a description. Here’s an example:
<button aria-describedby="payNowDescription">Pay now</button>
<div id="payNowDescription">Clicking the button will send you to our Stripe form!</div>
Use aria-hidden
to Hide Content
If there are visual elements on your page that don’t provide any value to users who can’t see them, you can use the aria-hidden="true"
attribute to instruct screen readers to ignore those elements.
Where to Learn More
This blog post serves as an introduction to the topic of web accessibility. If you want to delve deeper, I recommend exploring the following resources:
- W3C Web Content Accessibility Guidelines (WCAG)
- WebAIM: Web Accessibility in Mind
- Google Web Fundamentals: Accessibility
Tags: accessibility, HTML, semantic HTML, alt attributes, role attribute, tabindex attribute, ARIA attributes