Introduction to the 13 WCAG Guidelines

In our last blog post we provided an introduction to the Web Content Accessibility Guideline (WCAG) success criteria.

In this blog post we discuss the WCAG guidelines, which fall under the POUR principles. They are short statements providing guidance on what should be considered to make a website accessible, building on the principles and setting up the success criteria. WCAG 2.2 (the latest version) consists of 13 guidelines.

We are now going to briefly cover the 13 guidelines and give one example for each before we start to dive into the success criteria in WCAG 2.2.

Perceivable

• 1.1 Text Alternatives:
  • Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • Example: Provide text alternatives for images as not everyone uses their eyes to consume content online, e.g., someone who is blind may be using a screen reader.
• 1.2 Time-based Media:
  • Provide alternatives for time-based media.
  • Example: Provide captions for videos as not everyone can hear the audio, e.g., someone who is deaf or hard of hearing.
• 1.3 Adaptable:
  • Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
  • Example: When viewing a website in landscape or portrait the layout must respond accordingly and the same information should be available regardless of display orientation.
• 1.4 Distinguishable:
  • Make it easier for users to see and hear content including separating foreground from background.
  • Example: All text on a web page must meet the required contrast ratio against the background on which it is placed.

Operable

• 2.1 Keyboard Accessible:
  • Make all functionality available from a keyboard.
  • Example: Not everyone uses a mouse to navigate the web! Anything you can do with a mouse, you must be able to do with a keyboard.
• 2.2 Enough Time:
  • Provide users enough time to read and use content.
  • Example: Give people a heads up that the website is about to log them out and allow them the option to extend their session. Don't automatically log people out.
• 2.3 Seizure and physical reactions:
  • Do not design content in a way that is known to cause seizures or physical reactions.
  • Example: If adding animations to a website, provide a way for people to disable them if they wish to do so, e.g., a button to turn them off.
• 2.4 Navigable:
  • Provide ways to help users navigate, find content, and determine where they are.
  • Example: Create unique titles for each page of your website so it is clear what the purpose of the page is e.g., incorporate the primary heading so people can easily identify where they are. The page title appears at the top of the browser tab / window.
• 2.5 Input modalities:
  • Make it easier for users to operate functionality through various inputs beyond keyboard.
  • Example: Buttons and links should be large enough to be easily selected using a finger when navigating a website on a mobile device.

Understandable

• 3.1 Readable:
  • Make text content readable and understandable.
  • Example: Don't overwhelm people with jargon and difficult to understand content - keep it simple and concise.
• 3.2 Predictable:
  • Make Web pages appear and operate in predictable ways.
  • Example: Components that function in the same way should be consistently identifiable. Controls that are repeated across multiple pages on a website must have the same functionality, e.g., links with the same name bring you to the same place.
• 3.3 Input assistance:
  • Help users avoid and correct mistakes.
  • Example: Providing clear labels and instructions can help to prevent user error when filling in a web form. If errors do occur then provide clear instructions on how to resolve the errors.

Robust

• 4.1 Compatible:
  • Maximize compatibility with current and future user agents, including assistive technologies.
  • Example: Follow industry best practices when creating your website, using native HTML and ARIA (when needed), to ensure it works well and as expected with a screen reader.

Get involved!

We invite you to explore, learn, and engage with us. Join our email list to stay updated on the latest news, events, and resources. We also welcome anyone who wishes to collaborate with us to reach out to us.

Let's build a digital world where accessibility isn't just a feature but a fundamental right.

Stay tuned for updates, and let's make the digital landscape accessible for all.