Web Content Accessibility Guidelines – Free Ultimate Checklist!

With the rise of smartphones and modern technology, accessing information on the internet is not just convenient, it’s a way of life. However, not all information is accessible to those who have a disability, and more businesses are taking notice! With more than one billion people who live with a disability, companies cannot afford to lose out on potential customers because of an inaccessible website.

What are the Web Content Accessibility Guidelines?

Web Content Accessibility Guidelines discuss the use of assistive technologies such as braille displays and screen readers.

But what exactly makes web content accessible? The Web Content Accessibility Guidelines (WCAG) help answer this question. Guidelines were first penned in the early days of the internet, circa 1995 to establish a shared standard for website accessibility. WCAG 1.0 was released in 1999. As the internet continued to evolve, developers continued to update the guidelines and WCAG 2.0 released in 2008. In 2018, 2.0 was updated to 2.1.

WCAG 2.0 outlines how sites can be more accessible for people with a wide range of disabilities, including visual, auditory, speech, cognitive, learning and neurological disabilities. It also seeks to make the internet more available for elder individuals who may have additional difficulties due to aging. The guidelines also help to make the internet more accessible in general.

WCAG 2.1 builds upon the 2.0 criteria, further addressing gaps regarding mobile accessibility, low vision, and cognitive disabilities. The guidelines help introduce the next steps in advancing digital accessibility for those who need it.

The 12 WCAG guidelines are categorized under four main principles: perceivable, operable, understandable and robust.

In this article, we will break down each principle and discuss their guidelines, so that you can create a site accessible to everyone.

1. Perceivable

The first principle of the Web Content Accessibility Guidelines is that it is perceivable, meaning that the information and user interface components are displayed in a way that can be easily perceived by the user.

The perceivable principle is split into four guidelines:

Text Alternatives

Each web page needs to provide alternatives for any non-text content so that it can be changed into whatever form users need, such as braille, speech, large print or simpler language. Non-text content includes emoticons and images that represent words.

Time-based Media

There need to be alternatives for any media that is time-based in order to make sure that everyone has a chance to access all the information. This includes providing alternatives such as:

  • Prerecorded audio- and video-only media that provides equivalent information;
  • Captions for all pre-recorded and live audio content;
  • Audio description or media alternative;
  • Sign language interpretation; and/or
  • Extended audio description when there is insufficient time to give adequate description within the video.

Adaptable

The content on a webpage needs the flexibility to be obtainable in different ways (such as a simpler layout) without losing the underlying information or structure of the page:

  • The overall information and structure should still be presented even in alternative forms;
  • If there are sequences that are vital to the overall meaning, the correct reading sequence should be obvious in all of its forms; and
  • The information should not rely on shape, size, visual location, orientation or sound to be understood.

Distinguishable

The content should be easy for users to see and hear:

  • Color should not be the only means of conveying information;
  • Users need to be able to stop any audio that plays automatically for more than three seconds;
  • The contrast ratio for the visual presentation of texts and images of texts needs to be at least 4.5:1. In the case of large texts, the contrast ratio should be at least 3:1;
  • Users should be able to resize text up to 200% without the loss of content or functionality;
  • Text should be used to convey information rather than images of texts;
  • The contrast ratio between text and images of text needs to be at least 7:1. For large-scale texts and images, the ratio is 4.5:1. This does not include a logo or brand name;
  • Low or no background audio;
  • The visual presentation should have adequate spacing, not justified and no wider than 80 characters; and
  • Images of texts should only be used as decoration or where that specific presentation of text is required for the information being conveyed.

2. Operable

The next principle deals with how well the webpage can be navigated. The page should be operable for all people. The guidelines for making it operable include:

Keyboard Accessible  

The user needs to be able to navigate the webpage from a keyboard. This does not mean that it cannot be navigated on a mouse, but it should have keyboard functionality as well. This functionality should also not require certain timing for individual keystrokes.

Timing

Users need enough time to read and use the content on the page. If there is a time limit on the content, the user should be able to turn off or adjust the time limit before encountering it. There are exceptions, including:

  • If it is a real-time event, such as an auction;
  • The time limit is essential to the activity; or
  • The time limit is longer than 20 hours.

Seizures

A web page should not be designed in a way that could prompt a seizure. This means that flashes should be limited to fewer than three per second.

Navigable

A site must be easily navigable, meaning your setup will enable users to navigate through the webpage, find the content they need, and always know where they are on your website. There are multiple ways to ensure navigation:

  • Accurate page titles, headings, and labels that describe what the topic or page is about;
  • If the navigation sequence is essential to understand the meaning, the components need to receive focus in an order that helps retain the meaning and operability of the page;
  • Any links with meaning need to be discernible by the link text;
  • There is more than one way to find a webpage. The exception to this would be if the webpage is the result of a process; and
  • There should be information about where the user is within a set of web pages available.

3. Understandable

Web Content Accessibility Guidelines discuss the use of assistive technologies and the application of these technologies.

The next principle in accessibility is that a site should be intelligible and users must be able to understand both the information and how to operate the website. There are several ways to make sure that your website is understandable to everyone. The most basic elements of understandability include:

Readable

The text content needs to be clear and readable. Any unusual words, such as idioms and jargons, as well as abbreviations and ambiguous pronunciation of words, need to have a mechanism available to identify and clarify. In addition, if the reading level is above an eighth-grade level, there should be supplemental content for easier reading.

Predictable

A website should appear and navigate in a predictable fashion. Consistent navigation and identification, as well as the consistent context, make the site easier to navigate. The only change in context should occur if it is initiated by the user or the user has been advised about a change in context beforehand.

Input Assistance

Your webpage should help users avoid any mistakes and help guide them to correct them. This includes adding clear instructions and labels to anything that requires user input and any errors that are detected are identified to the user in text, as well as suggestions to improve it.

In addition, any web page should be reversible, and the user should have the ability to confirm and correct anything on the page before finalizing. This is especially true of anything that causes a legal or financial commitment. If a user needs help, it should be available on a context-sensitive basis.

4. Robust

The last principle has to do with how well your digital content can be interpreted utilizing every assistive technology. The site needs to be compatible with current, as well as future users, which includes assistive technologies.

This can be achieved through parsing or implementing markup language that has complete start and end tags. The name and role of all user interface components can be programmatically determined to help users with assistive technology.

Increase Your Web Accessibility and Reach More Users

In the past, ensuring your digital content was fully accessible for people with disabilities was both time consuming, and expensive. It often involved rebuilding a site from scratch.  However, the rise of automation has made creating an accessible website easier and more cost effective. The process for abiding by the Web Content Accessibility Guidelines 2.1 has never been easier with Audioeye’s use of technology, coupled with a team of accessibility subject matter experts continuously monitoring and remediating your digital content

Need help reaching the 41 million people with a disability that prevents them from accessing your website? Let our experts guide you through the process. Request a demo to make your website accessible today!