Skip to main content

The A11y Path

This blog aims to cover: W3C Guidelines, Assistive Technologies (AT), European Accessibility (EN 301 549), and more.

Understanding WCAG: Perceivable

Published

#was #wcag #tutorial

I spent some hours yesterday and today looking at the Perceivable Principle. As part of my goal I needed to deeply understand all that goes into meeting the WCAG principles

Here's a quick summary what I learnt.

Perceivable: Ensuring Content is perceivable to all users

The Perceivable principle ensures that users can see and hear content (not just visually) without missing important context or information. This means making sure content is presented in a way that works for different users.

You can follow the Perceivable guidelies to meet this principle

1.1 Text Alternatives

Provide text alternatives to non-text content, except when purely decorative. If an element conveys meaning (like an image, chart, or button icon), provide a text description. Examples of meeting this guideline are:

  • If it's an image, add alt text.
  • If it's a CAPTCHA, provide an accessible alternative (like an audio CAPTCHA).
  • If the visual content is complex (e.g., an infographic), provide a long text description or transcript.

1.2 Time based media

Provide alternative formats for audio and video content so users can access the information in different ways. Examples of alternative formats are

  • Captions for videos.
  • Audio description for visual-heavy content.
  • Transcript for people who can't listen.
  • Sign language interpretation for even greater accessibility.

1.3 Adaptable

Make sure content are structured properly so it can be presented in different ways without losing meaning. This means:

  • Using semantic HTML (headings, lists, tables) so assistive technologies can recognize content relationships.
  • Ensuring a logical reading order so that it makes sense if styles are removed. Don't use CSS to visually arrange content in a way that loses meaning for Assistive Technologies (AT) users
  • Not relying on only sensory characteristics like color or shapes to pass information, make sure instructions are clear regardless of visuals. So instead of: "Click the Red button with the left arrow at the bottom of the page", Say: "Click the 'Next' button at the bottom, which has a left arrow."
  • Supporting both portrait and landscape orientations unless a specific orientation is essential (e.g., a piano app).
  • Helping browsers and assistive technologies identify input fields using the autocomplete attribute.
  • Clearly marking the purpose of UI components using ARIA roles (e.g., using nav for navigation)

1.4 Distinguishable

Let users perceive content by providing the right contrast for the background and foreground, and avoiding using color alone to pass information. This includes:

  • Not using color alone to pass information (e.g., instead of saying "Required fields are in red," add a “Required” label or a * symbol).
  • Providing audio controls so users can pause or mute autoplaying sound.
  • Ensuring sufficient contrast between text and background:
    • For Level AA the minimum contrast ratio should be 4.5:1 for normal text, 3:1 for large text (18.5px bold or 24px normal).
    • For Level AAA the minimum contrast ratio should be 7:1 for normal text, 4.5:1 for large text.
  • Supporting zoom (up to 200% for AA) and reflow (up to 400% for AAA) without breaking the layout.
  • Allowing users to adjust text size, spacing, and line height without layout issues.
  • Avoiding fully justified text (since uneven spacing makes reading harder, especially for users with dyslexia).
  • Not relying on images of text, or if using them at AA, allowing users to customize their appearance. AAA requires avoiding images of text altogether. Except if it's a logo
  • Reducing background audio (at least 20dB lower than the foreground sound) or allowing users to turn it off.
  • Ensuring popups, tooltips, and dropdowns follow these rules:
    • They can be dismissed without losing focus (e.g., by pressing Esc, clicking outside, or another method).
    • They remain visible long enough for users to read.
    • If interactive, they accept focus without disappearing.

When content meets these Perceivable guidelines, it becomes more accessible to users with low vision, color blindness, hearing impairments, cognitive disabilities, and those relying on assistive tech.

So this was a really intresting learning process for me, I knew some of these guidelines previously but I found some of them too vauge to understand when reading the WCAG overview page, but reading the "Understanding" pages for each guidelines and success criteria was game changing. I've provided links to the understanding pages in the resources section

After learning this to ensure I really understand the Perceivable principle I asked ChatGPT to generate a IAAP WAS-style quiz focused on testing your understanding of WCAG 2.2 - Perceivable principle and it helped me realize that I actually do understand the Perceivable principle (Yay). So on to the next Principle soon

Resources