A simple review of WCAG (Web Content Accessibility Guidelines)

Web accessibility is the art of making sites easy-to-use for people with all kinds of impairments. It is no longer a trend, it's a must. Leading CMSs strive to be compliant — for example, we described Drupal 8 improvements to meet Web Accessibility Standards.

You will often hear such term as WCAG In relation to web accessibility. In this post, we give a simple review of what WCAG is and what web accessibility principles and guidelines it includes.

What is WCAG?

WCAG, or the Web Content Accessibility Guidelines, are a series of standards to make your website accessible to all users. They have been published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).

The WCAG principles are internationally recognized. They offer ways to address various accessibility issues that your audience with permanent, temporary, or situational disabilities may face. The latest version is WCAG 2.1, published in 2018, which includes 78 guidelines.

WCAG has its guidelines organized into 4 principles:

• perceivability
• operability
• understandability
• robustness

In addition, each guideline has success criteria, for which there are three levels: A, AA, and AAA.

The four accessibility principles of WCAG

Let’s take a closer look at the four above-mentioned WCAG principles and what each of them means.

Principle 1. Perceivable website content & interface

Make sure all the information and UI components are presented on your website in such ways that all users can perceive. In other words, it shouldn’t be invisible, or hidden from them .

For example, if someone relies on a screen reader and cannot see an image directly, they should have other ways to know what the image is about (such as an ALT description).

Ways to adhere to this accessibility principle include:

• text alternatives for non-text content (short descriptions for images, icons, buttons, charts, labels for interface components, etc.)
• hints for audio and video (captions, text transcripts, audio descriptions about the video’s visual details, sign language interpretation of audio, etc.)
• various ways to present the content (headings, lists, tables with proper mark-up, and so on)
• easier-to-see and hear content (using color contrasts, adjustable text size, adjustable audio volume, etc.)

Principle 2. Operable navigation & interface

The next web accessibility principle by WCAG deals with the possibility for all users to navigate through the website easily.

Users who rely on the keyboard instead of the mouse need to be able to do the same steps (navigate between the menu options, go to toolbars, use authoring tools, and many more). Recently, we described keyboard accessibility in Drupal 8.8’s Media Library.

Furthermore, many users need more time to do tasks on a website. So they should have the mechanisms to stop, extend, or adjust the time limits, safely re-authenticate when a session expires, and more.

An accessible website allows users to easily find relevant pages among others and find their current location on the site, provides clear page titles, makes the purpose of links evident, etc.

Another important part of this principle is support for other ways to interact with the site (touch activation, voice recognition and speech input, and gestures).

The content should be friendly and not cause photosensitive reactions or other discomforts. That’s why WCAG recommends avoiding flashing content (or warn about it and give the alternatives), as well as to making animations easy to turn off.

Principle 3. Understandable content & control

The next web accessibility principle of WCAG deals with making the content understandable. To achieve this, your website should use a clear and simple language, provide definitions for unusual words and technical terms, and make it easy to identify the main language of the site or text piece.

The user interface must be understandable as well and have a predictable behavior with navigation mechanisms in the same place on every page, UI components having uniform labels throughout the site, etc.

When users interact with the site, it should help them avoid or correct their possible mistakes. For this purpose, descriptive instructions, informative and specific error messages, correction suggestions, and more will be very helpful.

Principle 4. Robust content

Robust content, according to the 4th web accessibility principle of WCAG, means it can be reliably processed by various browsers and assistive software. These technologies should be able to present your content in various ways. This can be ensured by the proper code markup and providing the names, roles, and values for non-standard UI elements.

Let professionals make your website accessible

We have tried to give a simple overview of the key website accessibility principles contained in WCAG. You can always rely on our Drupal website development agency experts to make your website adherent to all of them.