15 HTML tags for accessibility

HTML 5 logo

In a previous article, I have written 30 HTML Tags To Know. I wanted to continue that conversation to focus specifically on HTML tags with accessibility in mind. When writing HTML, that we can test our code for accessibility by using keyboard navigation, accessibility checkers, screen readers, and by manually testing our markup. Some examples of accessibility checkers are WAVE, axe, and Lighthouse. Here are also 48 bookmarklets you can check out for testing websites for accessibility. These tools can help you find common problems such as missing alt text, low contrast, or invalid markup.

Let’s get started!

1. ARIA labels

The first rule of ARIA use is “If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.” Please refer to W3C for the complete list of ARIA rules.

The aria-label attribute is used to define a string that labels the current element. It helps assistive technology attach a label, which is otherwise anonymous, to an HTML element. You can use it in cases where a text label is not visible on the screen, such as icons or buttons. For example:

<button aria-label="Close">X</button>

If there is visible text labeling the element, you should use aria-labelledby instead. This attribute references another element that provides the label for the current element. For example:

<span id="logo">Be Accessible</span>
<img src="logo.png" alt="" aria-labelledby="logo">

We can also use aria-describedby in our HTML. It is an ARIA attribute similar to aria-labelledby that lists the ids of other elements that provide additional description for an element.

For example, if you have a text input that requires a specific format, you can use aria-describedby to link it to a hint element that explains how to enter the data correctly. Here’s a code snippet:

<input type="text" id="phone" aria-describedby="phone-hint"> 
<span id="phone-hint">Enter your phone number with country code</span>

2. <fieldset> and <legend>
These tags are used to group related form controls together and provide a caption for them. This helps screen readers and users who navigate with keyboards understand the context and purpose of each form control. The <fieldset> tag creates a border around the group of form controls, while the <legend> tag provides a title for them. For example:

<fieldset>
  <legend>Contact preferences</legend>
  <input type="checkbox" id="email" name="email">
  <label for="email">Email me</label><br>
  <input type="checkbox" id="phone" name="phone">
  <label for="phone">Call me</label><br>
  <input type="checkbox" id="text" name="text">
  <label for="text">Text me</label><br>
</fieldset>

3.<label>
This tag is used to associate a text label with a form control, such as an input field, a checkbox, or a radio button. This helps screen readers and users who navigate with keyboards identify what each form control is for. You should use the for attribute to link the label with the corresponding form control by their id attribute. For example:

<label for="name">Name:</label>
<input type="text" id="name" name="name">

4. Role attribute
The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. It helps to provide semantic information about the purpose of an element, especially when the HTML element does not convey its meaning clearly. For example:

<a href="#" role="button">Button Link</a>

This tells screen readers that this element is a button, not a link. There are four categories of roles: abstract roles, widget roles, document structure roles, and landmark roles. You can find a list of all the roles and their descriptions at MDN.

5. alt attribute with <img>
You should always provide an alternative text (alt attribute) that describes the image content or function for users who cannot see it. The alt text should be concise and relevant, and avoid repeating information that is already on the page. For example:

<img src="logo.png" alt="Be Accessible logo">

6. <h1> to <h6>
These tags are used to create headings for your content. They help screen readers and search engines understand the structure and hierarchy of your page. You should use only one <h1> tag per page and use lower-level headings in a logical order. For example:

<h1>HTML Accessibility</h1>
<h2>Semantic HTML</h2>
<p>Semantic HTML means using correct HTML elements for their correct 
purpose as much as possible.</p>
<h3><button> Element</h3>
<p>The <button> element defines a clickable button that can 
be used to trigger an action or submit a form.</p>

7. <table>, <th>, <tr>, and <td>
These tags are used to create data tables that display information in rows and columns. You should use proper markup to indicate table headers (<th>) and table cells (<td>) within table rows (<tr>). You should also use scope attributes to specify whether a header applies to a row or a column, and summary attributes to provide an overview of the table content for screen readers. For example:

<table summary="This table shows monthly sales figures by product category">
  <tr>
    <th scope="col">Category</th>
    <th scope="col">January</th>
    <th scope="col">February</th>
    ...
  </tr>
  <tr>
    <th scope="row">Books</th>
    ...
  </tr>

8. lang attribute
The lang attribute specifies the language of the page or a part of it. For example:

<html lang="en">

This tells our page that the language is in english.

9. tabindex
The tab index attribute specifies the order of keyboard focus for elements. For example:

<a href="#" tabindex="1">First link</a>

If a user were to tab through our page, the HTML element with tabindex=”1" would be the first in focus, and tabindex=”2" would be the second in focus. If we use tabindex=”0" then it follows the natural progression of tabbing in the page. We can use tabindex=”-1" if we want the element to be skipped over in tabbing.

10. <caption>
The <caption> tag defines a title for a table. The <caption> tag must be inserted immediately after the opening <table> tag, and it can only be used once per table. An example for <caption> is:

<table> <caption><strong>Sales report for January 2023</strong> </caption> 
<tr> <th>Product</th> <th>Sales</th> </tr> 
<tr> <td>Coffee</td> <td>$5000</td> </tr> 
<tr> <td>Tea</td> <td>$3000</td> </tr> 
<tr> <td>Milk</td> <td>$2000</td> </tr> 
</table>

11. <figure> and <figcaption>
The <figure> tag defines a container for content such as images, diagrams, code snippets or illustrations. The <figcaption> tag defines a caption for the content inside the <figure> element. The <figcaption> tag can be placed either before or after the content within the <figure> tag. The <figcaption> tag is not mandatory to be used with the <figure> tag.

An example for <figure> and <figcaption> is:

<figure> <img src="logo.png" alt="Octobot logo"> 
<figcaption>The logo of Octobot</figcaption> 
</figure>

12. <abbr>
The <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, etc. You can use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element. For example:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>

This will display “WHO” as an abbreviation with a dotted underline, and show “World Health Organization” as a tooltip when you hover over it.

13. <button>
Use a native <button> or <input type="button"> whenever possible, as they have built-in keyboard accessibility for both Enter and Spacebar keys. If you use a different element as a button, such as a <div> or a <span>, you need to add role="button" and tabindex="0" attributes to make it focusable and announce it as a button. You also need to add JavaScript event handlers for both click and keydown events to make your custom button work with mouse and keyboard. Always provide a clear and descriptive text label for your button, either inside the element or using the aria-label attribute. Avoid using images or icons as buttons without text labels, as they may not be understood by screen readers.

Here is an example of a native button with an accessible text label:

<button>Submit</button>

Here is an example of a custom button with ARIA attributes and JavaScript events:

<div role="button" 
tabindex="0" 
aria-label="Close" 
onclick="closeWindow()" 
onkeydown="handleKey(event)">
  <img src="close-icon.png" alt="">
</div>

<script>
  function closeWindow() {
    // code to close the window
  }
  function handleKey(event) {
    if (event.keyCode === 13 || event.keyCode === 32) {
      // Enter or Spacebar pressed
      closeWindow();
    }
  }
</script>

14. <nav>
The <nav> element is used to mark up a section of a page that contains navigation links. It helps users find and traverse the different pages available on your site.

Some tips for using <nav> with accessibility in mind are:

• Use <nav> only for site navigation or intra-page navigation, not for other types of links such as social media icons or footnotes.
• Use an unordered list (<ul>) inside <nav> to group your navigation links logically.
• Use aria-labelledby to label your <nav> element if it is not clear from the context what it contains.
• If you have more than one <nav> element on your page, use different labels for each one to avoid confusion.

Here is an example of using <nav> with accessibility in mind:

<nav aria-labelledby="main-nav">
  <h2 id="main-nav">Main navigation</h2>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

15. <audio> and <video>
The <audio> and <video> tags are HTML elements that embed audio and video content on a web page. They can be controlled by keyboard or mouse. However, they also need some additional features to make them accessible for users with disabilities, such as:

• Transcripts: These are text versions of the audio or video content that can be read by screen readers or displayed on the page. They should include all the spoken words and relevant sounds or music in the media.
• Captions: These are synchronized text overlays that appear on the video screen and show what is being said or heard. They should be accurate, clear, and readable. They can be either open (always visible) or closed (can be turned on or off).
• Description: This is an explanation of the visual information in the video that is not conveyed by the audio. It can be either integrated in the main audio track (audio description) or provided as a separate text track (text description). It should describe important actions, scenes, characters, and context.
• The <track> tag is used to provide additional information for audio and video content, such as captions or descriptions. It has a kind attribute that specifies the type of information (captions or descriptions), a srclang attribute that specifies the language of the information, and a label attribute that provides a name for the information. The track tag also has a src attribute that specifies the source file of the information, which is usually in WebVTT format.

Here are some code examples of how to use <audio> and <video> tags with accessibility features:

<audio src="podcast.mp3" controls>
  Your browser does not support the audio element.
  <track src="podcast.vtt" kind="captions" srclang="en" label="English">
</audio>

<video src="demo.mp4" controls>
  Your browser does not support the video element.
  <track src="demo.vtt" kind="captions" srclang="en" label="English">
  <track src="demo.ad.vtt" kind="descriptions" srclang="en" label="English">
</video>

Thanks for reading along so far! I will have additional content creating HTML pages, and will further explore design + code in future articles. Subscribe to see my future posts! If there is an HTML tag that is important for accessibility, please comment your thoughts!