Intro to Web Content Accessibility Guidelines

If you’re here, you’re interested in learning the basics of the Web Content Accessibility Guidelines, also known as WCAG. The Web Content Accessibility Guidelines are published by the Web Accessibility Initiative, a division of the World Wide Web Consortium, which is the main body of standards for the Web.

They can be a little intimidating at first glance. We’re here to give you a quick breakdown so you can understand the basics of these guidelines. 

The Four Principles

WCAG 2.0 and later are organized around four principles of web accessibility. Each principle has guidelines, and each guideline has a number of success criteria associated with it. For example: 

The fourth principle – Robust – has one guideline: Compatible. And that guideline can be met using three different success criteria: parsing; Name, Role, Value; and Status Messages. 

The principles are as follows: 

Perceivable: Information and user interface components must be presentable to users in ways they can perceive. If they can’t see, hear, touch or in some other way fully perceive the components, they are not accessible. 

Operable: User interface components and navigation must be operable. If the UI and navigation can’t be used or operated in some way, they are not accessible. 

Understandable: Information and the operation of the user interface must be understandable. If the information is confusing or frustrating to interact with, it isn’t accessible. 

Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. 

Conformance Levels

For each success criterion there is a conformance level. Conformance levels are A (basic accessibility), AA (medium accessibility) and AAA (best accessibility). 

Most people aiming to build an accessible website opt to reach the AA conformance level of WCAG 2.0 or higher. This means that you satisfy all of the level A and AA conformance checkpoints.

Let’s go through each principle one by one and learn about their guidelines, success criteria, and conformance levels. 

Perceivable

The first guideline under this principle is called Text Alternatives and its success criteria is called Non-text Content, which is level A. This says you should provide alternative text for images on web pages, unless they are there for decoration.

Next is Time-based Media. This covers 9 success criteria that cover providing alternatives to prerecorded audio and video, providing captions for the audio track in a video, and creating audio descriptions of body language, expressions and movements. All of these criteria are level A.

After this we come to Adaptable. Success criterion Sensory Characteristics (level A) prohibits instructions for understanding and operating content relying on sensory characteristics like shape, color, size, visual location, orientation, or sound. So you couldn’t tell a user to press the square button to continue and the round button to cancel, for example. You would need additional text labels.

The final guideline for the Perceivable principle is Distinguishable. This covers 13 success criteria. Success criterion here specifies that color alone is not the only way of distinguishing information. One way to fail this criterion would be to have a link color that is very similar to body text, and not distinguish the link with an underline. This success criterion also recommends a minimum color contrast of 4.5:1 for standard text against a background. For large text the ratio is 3:1. Success criterion Images of Text recommends using actual text rather than images of text where possible. Logos are an exception. Success criterion Reflow says that users should be able to enlarge text without increasing line length – content should reflow within the browser window. This can be achieved by using a responsive design.

Operable 

The first guideline for the Operable principle is Keyboard Accessible. Success criterion Keyboard says that all content should be accessible via a keyboard.

The second Operable guideline is Enough Time. Success criterion Timing Adjustable says that users must be able to turn off, adjust or extend the time for time-based tasks. Success criterion Pause, Stop, Hide says that users should be able to pause, stop or hide content that moves, blinks, scrolls or auto-updates for more than five seconds. An example of failure would be a video that autoplays without controls to stop it.

The next Guideline is about Seizures. Success criterion Three Flashes or Below Threshold mandates that web pages do not contain content that flashes more than three times in one second. 

Next is Guideline Navigable. This covers 13 success criteria. Page Titled suggests that web pages have appropriate descriptive titles. Success criterion Link Purpose recommends creating links whose purpose is determined by the link text or the surrounding context.  Success criterion Headings and Labels says that content should be described by headings or labels. Success criterion Focus Visible  means that a keyboard focus indicator (usually a border) should be visible on the page when the keyboard is used. 

Input Modalities is next and its success criterion is Label in Name, which means that visible text labels for controls should match their accessible names.

Understandable 

With the Understandable principle, we start with Readable. Success criterion Language of Page says that the language of a web page should be defined in its source code. This helps screen readers to read out the page correctly. Success criterion Language of Parts  recommends that words or phrases in a foreign language be marked up as such.

The next guideline is Predictable and success criterion On Focus. This says that changes of focus should not initiate actions. For example, using the tab key to navigate to a submit button on a form should not submit the form. Success criterion On Input is next. This says that input changes should not initiate unexpected changes on a web page. An example is if a user types in an input field or checks a checkbox, that should not then complete a checkout process. Success criterion Consistent Navigation  says navigation across a website should be the same on all pages.

Next is  Input Assistance and its success criterion is Labels or Instructions . This recommends putting descriptive labels for form fields in close proximity to them, or adding instructions to complex forms.

Robust

The first guideline is Compatible. Success criterion Name, Role, Value recommends having interactive elements like forms and buttons properly labelled for assistive technologies. This benefits users of screen readers, screen magnifiers, and speech recognition software.