A11y Front-end Roadmap #6 - Common elements
Essential Web Components Requiring Accessibility Improvement
With more than 100 different tags and elements, mastering HTML is a challenging task. Luckily, all the information you need is readily available across the web and, more importantly, in official documentation, so there's no need to memorize all of them. However, to speed up your progress, it's essential to have a deep understanding of the more common elements, so you don't waste time and effort.
In the previous section, we highlighted the key concepts regarding text semantics. Now, let’s discuss other frequently used elements.
1 . Lists <ul>, <ol>, <li>
Lists are really useful elements. Consider how often you have lists of items in your content and how many missed opportunities you've had by using simple <div>s to group your elements. Carousels, blog post categories, search results, cards, catalogs: they're all lists pretending to be something else! Implementing lists allows assistive technologies to recognize (and announce) how many items are in the list and which item the user is currently on, a nice feature indeed.
We've already seen these elements in the Typography section, so nothing more here. Just a reminder: use ordered lists if the order of items is meaningful and ensure that only <li> (list items), <script>, and <template> are first-level children.
2. Anchors <a>
Anchors are your navigation tool of choice. When defining an <a> element, always ensure it has an href attribute; otherwise, it will not be focusable via keyboard. Its href value can be a relative or absolute path or “something else” if navigation is handled by JavaScript. In this case, your “something else” can be any string, but it's better to specify a possible fallback, such as a “#” to reload the page or a static URL.
Make sure to indicate if the navigation opens a new page/window or a different site. This can be done using an aria-label attribute (example 1) or by adding “opens in a new tab/site” text to the anchor content (example 2), even as an icon (example 3):
// Example 1
<a href="http://www.anothersite.com" target="_blank" aria-label="Another site, opens in a new tab.">
AnotherSite.com
</a>
// Example 2
<a href="http://www.anothersite.com" target="_blank">
AnotherSite.com <span aria-hidden="true" class="visually-hidden">, opens in a new tab.</span>
</a>
// Example 3
<a href="http://www.anothersite.com" target="_blank">
AnotherSite.com
<img src="image/path" alt="Opens a new tab">
</a>
If you want to navigate only after executing your logic via JavaScript, remember to use event.preventDefault() to avoid initial navigation to the specified href value.
3. Buttons
Buttons are essential interactive elements on any web page. Ensure that they are accessible via keyboard and operable by the Enter and Spacebar keys. A <button> is meant to trigger actions, not for direct navigation.
When implementing a button, always specify the button type. By default, a button has type="submit", used for sending form values to the resource specified in the action attribute. If you want to use it to trigger other actions, specify type="button" instead.
Finally, remember to add a clear explanation of the purpose of your button. You can add visible or visually-hidden text within the tags, use an icon/image with an alt attribute, or an aria-label value that will be announced by assistive technologies, ignoring what is contained within the <button> tags.
3. Images
Although images are ever-present, they are not complex to manage from an accessibility perspective in most of their occurrencies.
First, determine if your image has meaning or importance in terms of your content. Images should always include alternative text (alt attribute) to convey their meaning to users reliant on screen readers. Using descriptive alt text is essential; use meaningful descriptions that convey the content or function of the image, or a simpler alt="" with role="presentation" for images that are purely decorative, to avoid unnecessary or repetitive content for assistive technology users.
There's already a detailed article on images I've written; take a look at it at All about images article to (I hope) learn some useful details about them, accessibility, and also about performance and technical alternatives available to developers.