An Introduction to Web Accessibility Part 1

In the first part of this series, I’ll introduce web accessibility, how everyone benefits from it and demonstrate how it is measured with the WCAG.

The Medium platform does not support footnotes, headings beyond level 2, markdown or a table of contents. For a better reading experience, read the full article series on one page here.

Introduction

Web accessibility is design that works for everyone, regardless of the hardware and software they use to access your site. This involves understanding your fellow web users to anticipate their needs and how they consume information to build better experiences.

Here are some videos on the variety of software and hardware people use to surf the web. I recommend watching these videos, as they provide additional context and motivation for the rest of the article.

• A screen reader user¹: I recommend turning on captions for this video. Screen reader software reads on-screen information, and provides many keyboard shortcuts to speak information on demand such as what the next heading is, the url of the current page or the current paragraph. By relying on these keyboard shortcuts and the spoken output, users can operate a computer or mobile device without reading text or looking at the screen. This is helpful for users who are dyslexic or visually impaired.
• A screen magnification user: screen magnification software makes it easier to read the screen by enlarging text, providing colour adjustments to increase contrast and making the cursor’s location easier to find.
• A voice input user: voice input software listens for spoken commands so that users can operate a computer by voice without the need for other physical movements.
• An assistive switch user: assistive switches allow use of simpler physical movements like pressing a button or moving a joystick. These switches can be used to control a wide variety of devices such as computers and mobile phones.

Accessible websites increase useability for everyone.

• Captions on a video helps anyone who isn’t able to understand or hear the audio. For example, watching a video on a noisy train, foreign language movies or for someone who is hearing impaired. Captions can also be indexed by search engines, which is incredibly helpful for lectures, presentations and speeches.
• Forms that are keyboard compatible, labelled correctly and built with HTML5 input features allow screen reader and password manager users to more accurately fill out the form. It is also faster to fill these forms via keyboard than the mouse by using the tab key to move between fields, space to toggle check boxes and enter to submit.
• Using semantic HTML, choosing the right element for the content, makes it easier to programatically understand your site. Screen reader users can immediately move to the main contents of the page if it is under an <h1> or inside a <main> element. Search engines rely on logical heading structure to understand content. It future proofs your sites so that they work with future interfaces or devices.
• Responsive design makes it easier for magnification software users as well as anyone on a mobile device to use the site.
• Accessibility is a legal requirement in some countries. This should never be your main reason for implementing web accessibility. Nonetheless, it is important to highlight that it reduces your organization’s legal risk.

Measuring Web Accessibility

The Web Content Accessibility Guidelines (WCAG are a systematic means of ensuring your website is accessible. It is also the standard used in many organizations, and is the basis of accessibility legislation.

There are 2 versions of the WCAG that are widely used: 2.0 and 2.1. WCAG 2.1 introduces additional success criteria and is backwards compatible with WCAG 2.0. Thus, using WCAG 2.1 for new content is recommended.

WCAG 2.1 consists of 13 guidelines, founded on the following POUR principles:

1. Perceivable — information and UI elements are presented to users in ways they can perceive. Examples include alt text in images and captions in videos.
2. Operable — UI elements must be operable by users, and shouldn’t require interactions that users can’t perform. For example, keyboard compatibility for users who are not using the mouse.
3. Understandable — information and the operation of the UI must be understandable. For example, using clear language in text content, and descriptive error messages to make it easier to correct forms.
4. Robust — content should be robust enough to be reliably interpreted by different browsers, assistive technologies and other user agents. This also means compatibility with future devices and interfaces which may not exist today. For example, using valid HTML so that it can be reliably interpreted.

Choosing a Level of Conformance

Each WCAG guideline contains testable success criteria which can be used to audit for conformance. For each success criteria, a website passes by implementing it correctly, and fails otherwise. There are 3 conformance levels, which represent things that you must do, should do or could do:

• Level A: this is the minimum level of conformance. This is achieved when all level A success criteria are satisfied. If a website is not conformant to level A, there are significant barriers that prevent some users from being able to access content, and these issues are difficult or impossible to work around. A user using only the keyboard cannot activate drop down menus that only appear on mouse hover. A blind screen reader user cannot understand an image without an alternative description.
• Level AA: this is achieved when all level A and level AA success criteria are satisfied. If a website is not conformant to level AA, there are issues that make it difficult for some users to access or use the content, though they could be worked around with effort. For example, not being able to follow focus due to missing focus outlines when navigating with a keyboard makes it difficult to use the site.
• Level AAA: all level A, AA and AAA success criteria are satisfied. If a website is not conformant to level AAA, content is technically accessible, but there are issues that could be addressed to improve usability for everyone. For example, not explaining an acronym or abbreviation makes the content harder for everyone to understand.

Level AA is the generally accepted level of compliance that websites should attain.

Websites should comply to as many AAA success criteria as they can, but full AAA conformance is impossible for many sites. For example, replacing advanced terminology or jargon with simpler language for a website on web development to conform to success criteria 3.1.5 would make it unuseable by the intended audience.

We’ve seen why accessibility is important, how different users use the web and how web accessibility is measured. The next part of this article goes into more technical detail on simple but impactful changes that can make your sites more accessible.

1. This is a recorded Smashing Magazine webinar that I highly recommend watching in full. The link above will start playing at the point where the screen reader usage demonstration starts.