How to improve Web Accessibility

Published on April 8, 2024

5 min read

Build a website everyone can use, no matter their abilities. Many sites and tools have accessibility barriers that make them hard or impossible for some people to use. Web accessibility helps screen readers and other tools understand content better.

Semantic HTML

A semantic tag describes its meaning to both the browser and the developer. It also improves SEO, making your site easier to find.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>WAI-ARIA Attributes to improve Web Accessibility</title>
</head>
<body>
  <header>
    <nav>
      <!-- main navigation in here -->
    </nav>
  </header>

  <!-- main page content in here -->
  <main>
    <!-- article's content -->
    <h1>WAI-ARIA Attributes to improve Web Accessibility Post</h1>
    <p>Published on <time datetime="2024-04-08">April 08, 2024</time></p>

    <article>
      <h2>Introduction</h2>
      <!-- more content -->
    </article>

    <aside>
      <h3>Related</h3>

      <!-- aside content in here -->
    </aside>
  </main>

  <!-- footer content in here -->
  <footer>
    <p>&copy; 2024 Blog. All rights reserved.</p>
  </footer>

</body>
</html>

Semantic markup has other benefits beyond accessibility: - Easier to develop with; they have built-in keyboard accessibility — users navigate between buttons with the Tab key and activate their selection with Space, Return or Enter. - Search engines favor semantic elements like headings and links for SEO, making your content easier to find than non-semantic elements like <div>.

ARIA roles

By default, many semantic elements in HTML have a role; for example, <main> has the "main" role.

Use ARIA roles to describe elements that don't natively exist in HTML, or exist but don't yet have full browser support.

For instance, aria-required="true" marks required fields.

<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-required="true" />

Heading hierarchy

The hierarchical structure shows users how topics fit together, where to find information, and how important it is.

<h1>Top level heading</h1>
<h2>Secondary heading</h2>
<h2>Another secondary heading</h2>
<h3>Low level heading</h3>

Using clear language

Use meaningful text that gives users information. Write descriptive text instead of generic text.

<!-- Generic Link Text (Not Accessible) -->
<a href="https://www.example.com">Click here</a>

<!-- Improved Link Text (Accessible) -->
<a href="https://www.example.com">Visit the official website of Example Inc.</a>

Using tabindex

When users press the tab key to browse a webpage, only interactive elements (like links, buttons, form controls) get focused. tabindex makes other elements focusable too.

Set to 0, the element becomes focusable by keyboard and script. Set to -1, the element becomes focusable by script but stays out of the keyboard focus order.

Note

Use element.focus() to set focus

Touch targets must be large enough to interact with. The recommended size is 48x48 px.

State and Property Attributes

ARIA attributes convey the state and properties of elements. For example, aria-hidden indicates whether the element is exposed to an accessibility API.

Accessible Names and Descriptions

ARIA attributes make widgets easier to understand for screen reader users.

The aria-describedby attribute lists the ids of the elements that describe the object. It links widgets or groups to the text that describes them.

<button aria-describedby="trash-desc">Move to trash</button>
<p id="trash-desc">Items in the trash will be permanently removed after 30 days.</p>

aria-describedby can link to error messages within form fields.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" aria-describedby="email-error" />
<div id="email-error" role="alert">Please enter a valid email address.</div>

The aria-label provides the interactive element with its accessible name.

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

Alternative Text for Images

Alternative text provides descriptive content or purpose to screen reader users and search engines for SEO.

<img
  src="dinosaur.png"
  alt="dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
/>

Captions and Transcripts

Captions and transcripts are necessary for web accessibility, especially for people with hearing impairments. They make audio and video content reach a wider audience.

Captions provide a text representation of a video's content.

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="captions" label="English" src="captions-en.vtt" srclang="en" default />
</video>

In this example:

<video>: Embeds the video element.
<source>: Specifies the video source file.
<track>: Defines a caption track.
kind="captions": Indicates that this track contains captions.
label="English": Specifies the label for the captions.
src="captions-en.vtt": Points to the WebVTT (Web Video Text Tracks) file containing captions.
srclang="en": Specifies the language of the captions.
default: Indicates that these captions should be displayed by default.

Transcripts provide a written version of the audio's content. Here's an example of an audio transcript.

<audio controls>
  <source src="your-audio-file.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

<h2>Transcript:</h2>
<p>This is the transcript of the audio content.</p>
<p>You should include all the relevant information that is conveyed through the audio.</p>
<p>
  Make sure the transcript is synchronized with the audio content to provide an equivalent
  experience for all users.
</p>

Web accessibility matters. As a frontend developer, you help make the internet inclusive for everyone. Use practices like semantic HTML, alt text for images, and keyboard navigation. Every accessible website you build counts. Keep going!

Quick Recap

Semantic HTML Best Practices
- Use appropriate HTML elements for their intended purpose
- Maintain proper heading hierarchy
- Include meaningful alt text for images
- Use semantic elements for better SEO and accessibility
ARIA Implementation
- Use ARIA roles and attributes when native HTML isn't sufficient
- Provide clear accessible names and descriptions
- Maintain proper state management
- Don't use ARIA when native HTML elements suffice
Content Accessibility
- Write clear, descriptive text
- Provide captions and transcripts for media
- Ensure sufficient color contrast
- Make interactive elements keyboard accessible