Tutorial

Web Accessibility For Beginners

Published on December 12, 2019

Development

Egwuenu Gift

Introduction

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.

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:

Cognitive
Neurological
Physical
Speech
Visual
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 div to represent everything and forget about the appropriate tags for headings, lists, and tables. HTML5 provides additional elements, such as <nav> , <section> and <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>

Associate a label with every form element: Whenever possible, use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of 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:

Conclusion

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.

Learn more about our products

About the authors

Egwuenu Gift

author

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.