Web Accessibility For Beginners
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using 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 world population experience some form of disability. This amounts to almost half the population of the web.
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 application and tools to leverage and improve accessibility in your workflow.
What is Web Accessibility?
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:
- Auditory disabilities
Accessibility encompasses disability and still account for cases whereby the people using the web have the following limitations:
- Poor Internet connectivity.
- Temporary injuries, for example a broken arm
- People using devices with smaller screens like Smartwatches or Smart TVs
The POUR principle
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:
Perceivable: Content on the web should be perceivable. This means the web should be available to the senses (vision, touch, and hearing) either through the browser or through assistive technologies like screen readers, screen enlargers and others.
Operable: Content on the web must be operable. This means users can interact with all controls and interactive elements using either the mouse, keyboard or an assistive device. If the content is impossible to navigate then it is inaccessible.
Understandable: The content on the web should be clear and concise and easy to understand. Try as much as possible to cut down spelling errors and complex grammar. This is because as web developers we should never assume knowledge for the user.
Robust: It is really important to have consistency across the web. What this means is are you maximizing compatibility with the tools you are building for? Does your site work the same way across all platforms i.e Browsers, Operating systems, and Device sizes etc?
Tips For Making Your Site Accessible on the Web
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.
- Add Alternative Text for Images: When using images in your websites, one important thing people miss out on is adding the
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.
- Make use of Semantic HTML: This is another important rule that many developers overlook. Most developers use
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 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
langattribute in the
HTMLtag. For example,
<html lang="en">. Use the
langattribute on specific elements when the language of the element differs from the rest of the page.
<--here the language can either be switched to the default language used in the page.--> <html lang="en"> <head> ... </head> <body>...</body> </html>
- Associate a label with every form element: Whenever possible, use the
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>
Tools To Leverage When Building Accessible Sites
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.