By Egwuenu Gift
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Building accessible applications or websites is not the norm today. This is because the idea of accessibility is known to most developers, while in actual sense it is often neglected and not a common practice today in the world of web development. According to World Bank Statistics about 15% of the world population experience some form of disability.
In this tutorial, you’ll learn about what web accessibility means for developers, how it affects the users of the web, and also ways to improve applications and tools to leverage and improve accessibility in your workflow.
Web Accessibility or a11y as it is often called is a practice whereby websites, tools, and technologies are designed and developed so that people with disabilities can use them.
“Accessibility” is often denoted as “a11y” because there are 11 letters between the “A” and “Y” in the word “Accessibility”. This pattern is known as a Numeronym.
Accessibility is all about making the web accessible to everyone. This includes people with all forms of disabilities including the following:
Accessibility encompasses disability and still account for cases whereby the people using the web have the following limitations:
The POUR principle is what guides building accessible websites. This principle helps put people at the center of the process. Every website should fulfill the following principles:
There are a number of ways to help incorporate accessibility into your usual routine when building websites. Most of these tips can be implemented without impacting the overall look and feel of your website.
alt=""attribute to images. Here’s an example of an accessible image tag.
<img src="./cat.png' alt="A cat sitting on a chair">
The big picture difference between having the alt attribute in all images and not including it is that screen readers can announce the alt tags for people with visual and cognitive disabilities. One important guideline is to make sure the alt description is relevant, meaning it should describe the content and intent of the actual image. In the example above,
A cat sitting on a chair describes the entire content of the image, instead of just
cat for the description.
divto represent everything and forget about the appropriate tags for headings, lists, and tables. HTML5 provides additional elements, such as
<aside>, to better structure your content. This is an example of a well-structured page using semantic HTML.
<body> <header> <h1>Shop</h1> </header> <main> <article> <h2>An inside look at the new Shop v2</h2> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> </main> <footer> <p>© Shop Inc.</p> </footer> </body>
Always provide an option to skip the Main Content: For users that rely on screen readers and keyboard, this feature is very important because it provides the option to skip to the main content. The technique for achieving this is by adding a link to skip to the main content and make it invisible until the element receives keyboard focus. An example of this is the BBC.com official website. When using your keyboard to navigate, the option to skip to the main content is provided when the keyboard focuses on that element and it is visible.
Identify page language and language changes: Always remember to indicate the primary language of every page by using the
lang attribute in the
HTML tag. For example,
<html lang="en">. Use the
lang attribute on specific elements when the language of the element differs from the rest of the page.
<html lang="en"> <head> ... </head> <body>...</body> </html>
labelelement to associate text with form elements explicitly. The
forattribute of the label must exactly match the
idof the form control. In specific situations, it may be acceptable to hide
<label>elements visually, but in most cases, labels are needed to help all readers understand the required input.
<form> <label for="username">Username</label> <input type="text" name="username" id="username"> <label for="email">Email</label> <input type="email" name="email" id="email"> </form>
There are countless tools available to help you build accessible sites. Here are a few that you can use to make your sites more accessible, and to learn more about a11y in general:
You can find more tools to leverage from the compiled Web Accessibility Evaluation Tools List, along with some other general resources:
In this article, you learned about what web accessibility is, and what it means for users with different abilities to use an accessible website. You also learned about the various methods that you can use to make sites accessible for all users. Finally, you examined accessible HTML examples to understand how to implement each of the suggestions in this tutorial.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.Sign up now
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!