Developing a website that everyone can use, no matter their abilities or disabilities is important; however, many sites and tools are developed with accessibility barriers that make them difficult 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, and also improves SEO, making your site more findable.
<!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>© 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 can navigate between buttons using the Tab key and activate their selection using Space, Return or Enter.
- Semantic elements like headings and links are favored by search engines for SEO, making your content more discoverable compared to non-semantic elements like
<div>.
ARIA roles#
By default, many semantic elements in HTML have a role; for example, <main> has the "main" role.
ARIA roles can be used 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" can be used to indicate 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, it shows readers 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 provides users with information. Instead of providing generic text write descriptive 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 use the tab key to browse a webpage, only interactive elements (like links, buttons, form controls) get focused.
With the tabindex other elements can be made focusable.
When set to 0, the element becomes focusable by keyboard and script. When set to -1, the element becomes focusable by script, but it does not become part of the keyboard focus order.
Use
element.focus()to set focus
Additionally, touch targets must be large enough for the user to interact with, with the recommended size being 48x48 px.
State and Property Attributes#
ARIA attributes convey the state and properties of elements.
For example, aria-hidden can be used to indicate whether the element is exposed to an accessibility API.
Accessible Names and Descriptions#
ARIA attributes can be used to make widgets more understandable for screen reader users.
The aria-describedby attribute lists the ids of the elements that describe the object. It is used to establish a relationship between widgets or groups and 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 be associated with 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 ensure that audio and video content is accessible to 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>Understanding web accessibility is important. 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 create matters. Keep going!