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:

Tags: accessibility, HTML, semantic HTML, alt attributes, role attribute, tabindex attribute, ARIA attributes