The A11y Path

In my last article, I gave a brief overview of the Perceivable principle, including a general understanding and examples. However, I did not cover the Success Criteria for each guideline. Since this blog is intended as a reference point for everything I've learned, I've decided to do a deep dive into the Perceivable principle.

Let's jump right in:

What does Perceivable mean?

Don't judge me, but initially, I didn't understand how the guidelines under "Perceivable" correlated with the word itself. I thought "perceivable" meant something else. However, after a quick Google search, it became clearer.

Here's what I found:

Perceivable means something can be seen, heard, or noticed. It can also mean something can be understood or apprehended.

Oh, that makes sense! I then searched for synonyms of "perceivable," and some of the words I found include: apprehensible, graspable, intelligible, understandable, and comprehensible.

Okay! So, for a component to be perceivable, users need to be able to comprehend it. Now the guidelines make sense—silly me 😅

So, let's look at the guidelines.

In order for your web component to be marked as perceivable WCAG provided the following guidelines

1.1 Text alternative

You should provide text alternatives for non-text content so it can be converted into other forms to meet people's needs. An example of another form that text can be converted into is Braille. I also think this could help users who speak a different language from the primary language translate the content.

"Text," in this context, refers to actual text, not images of text—because an image is itself considered non-text content. Duh!

This guideline is quite clear, so it only has one success criterion.

1.1.1 Non text content (Level A):

This success criterion (SC) benefit people who can't see or have low vision, people who find graphical media (like charts) difficult to understand, people who are deaf-blind (allowing them to read in Braille), people who are deaf (there's ongoing research on translating text into sign language), and people who speak different languages.

This SC has some exceptions:

• Controls or input fields: If the non-text content functions as a control or accepts user input, assistive technologies (AT) can already detect the accessible name for that content, making a separate text alternative unnecessary.
• Time-based media: There's a separate guideline dedicated to time-based media; however, but you can still provide a text alternative describing the media.
• Tests or exams: If the content is a test that would become invalid if presented in text, the text alternative should include a descriptive identification of the content rather than the test itself.
• CAPTCHA: an alternative form of CAPTCHA that can accommodate different disabilities should be provided
• Decorative content: Decorative content should be hidden from assistive technologies (AT).

An example of passing this SC is providing a bar chart accompanied by a descriptive text alternative. The text alternative would clearly state the purpose of the chart, specify its type, and present the data in a table format.

1.2 Time based media

You should provide alternative formats for audio and video content. In this case, a simple text alternative might not always fully accommodate users' needs, which is why the Success Criteria for this guideline provide more specific guidance.

1.2.1 Audio-only and Video-only (Prerecorded) (Level A)

You should provide an alternative for media content that's perceivable through only one sense:

• If it's audio-only content, provide a word-for-word transcript of the audio.
• If it's video-only content, provide an audio alternative describing what's happening in the video.

This Success Criterion benefits people with visual impairments, hearing impairments, or both.

1.2.2 Captions (Prerecorded) (Level A)

Provide captions for prerecorded videos. This SC benefits people with hearing impairments, but it can also be helpful for people who are situationally unable to listen to the video—for example, people in public spaces who don't want to play a video out loud.

Captions only pass this SC if they are synchronized with the audio of the video. If a video is an alternative presentation of content already provided via text on a webpage, it does not fail this SC.

1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)

Provide an audio description or present all of the information from the video in text form. This benefits people with visual impairments and people who have difficulty understanding moving images.

1.2.4 Captions (Live) (Level AA)

Provide captions for live videos. This enables people with hearing impairments to follow along with the video in real-time. The captions should include not only the audio but also identify who is speaking. An example of this is when a news station provides captions for a live broadcast.

1.2.5 Audio Description (Prerecorded) (Level AA)

This SC ensures that you provide a synchronized audio description of what's shown in a video. This benefits people with visual impairments, as the visual information in the video is described to them. The audio description is read during pauses in the dialogue, providing information about actions, characters, scene changes, and on-screen text that are important but not described or spoken in the main soundtrack.

An audio description is a separate audio track that describes the visual elements of a video or multimedia product. It provides information such as actions performed in the video, scene changes, and important on-screen text that isn't spoken in the main soundtrack.

1.2.6 Sign Language (Prerecorded) (Level AAA)

Provide sign language interpretation for prerecorded audio. This benefits people who are deaf or have hearing impairments and are fluent in sign language. People whose primary language is sign language sometimes have limited reading ability and may find it difficult to comprehend captions. Therefore, providing synchronized sign language interpretation with your video accommodates these users.

1.2.7 Extended Audio Description (Prerecorded) (Level AAA)

This SC extends 1.2.5 Audio Description to ensure you can provide an even more detailed audio description for a video. In this SC, if the pauses in the audio aren't long enough to accommodate an extensive description, the media is paused to insert the additional audio description, then resumed once the description is complete.

1.2.8 Media Alternative (Prerecorded) (Level AAA)

Provide a text equivalent for all content in videos. This SC accommodates more people, especially those who are deaf-blind, ensuring they can better understand the media content at their own pace.

1.2.9 Audio-only (Live) (Level AAA)

Provide a text equivalent for live audio-only content. This benefits people with hearing impairments.

1.3 Adaptable

This guideline ensures that content is structured properly so it can be understood by all users, regardless of how they access it. If the structure or information on a webpage isn't clear to assistive technologies, users might not be able to understand it when presented in a different form. The Success Criteria under this guideline provide examples of how a webpage can be adaptable.

1.3.1 Info and Relationship (Level A)

This SC ensures that the information and relationships of content remain the same regardless of the presentation format.

For example: Headings are usually bigger, list items are typically presented differently from regular paragraphs, tables are organized systematically, and form fields are commonly grouped together.

This SC ensures that your page is semantically structured so that headings are correctly presented as headings, regardless of how users access them. If a developer uses a p tag styled visually as a heading instead of using actual heading tags, they fail this SC because a screen reader would interpret the content as a paragraph, not a heading. The same rule applies to lists and tables. This SC benefits people with visual impairments who use screen readers and people who are deaf-blind using braille displays.

A good way to test this is to check if the information still makes sense when accessed sequentially through different means (e.g., read aloud by a screen reader).

Sometimes, these relationships might not be clearly understood by assistive technology. In such cases, provide a written description nearby. For example, in a form, you might add: "All required fields are marked with an asterisk (*)".

1.3.2 Meaningful Sequence (Level A)

This SC ensures that content appears in a logical sequence for all users. If the sequence of the content is important for understanding, it should be structured correctly in HTML rather than using CSS to visually reorder it. This benefits users who rely on assistive technology to read content aloud.

1.3.3 Sensory Characteristics (Level A)

When providing instructions for operating a component, avoid describing the component solely by sensory characteristics such as color, location, size, or shape. Sensory characteristics can be included in addition to clear text or labels. For example, instead of saying "Click the red button to cancel this operation," or "Click the red button with the X icon to cancel this operation," you should say, "Click the red button with the X icon labeled 'Cancel' to cancel this operation."

This SC doesn't discourage using sensory characteristics entirely, as these descriptions can benefit users with cognitive impairments. However, since some users cannot perceive sensory characteristics, it's important not to rely solely on them.

1.3.4 Orientation (Level AA)

Do not restrict content to either portrait or landscape orientation unless it's essential. This SC benefits users with motor impairments who have mounted devices or users with visual impairments who prefer a certain device orientation for easier reading.

An example where orientation restriction might be essential is a piano app designed to emulate a piano.

1.3.5 Identify Input Purpose (Level AA)

Provide clear identification for form inputs that collect user information, enabling user agents to communicate the purpose of each input to users. An example of this is using the HTML autocomplete attribute.

Using and repurposing predefined autocomplete definitions allows user agents and assistive technologies to present the purpose of input fields to users in different modalities. For example, assistive technologies might display familiar icons next to input fields to help users who have difficulty reading. An icon of a birthday cake might be shown beside an input field with autocomplete="bday", or a telephone icon next to a field with autocomplete="tel".

This SC benefits users with cognitive impairments who may not understand the purpose of an input from the label alone. It also aids users with motor impairments by enabling user agents to autofill form inputs.

1.3.6 Identify Purpose (Level AAA)

This SC ensures the purpose of different parts of a webpage (like buttons, links, icons, and sections) is clearly understandable by user agents. When a user agent understands what each element represents, it can communicate this purpose clearly to users visually, audibly, or through symbols. An example of achieving this is using ARIA roles and semantic HTML, enabling users to hide elements that don't have a certain role. This helps users with cognitive impairments consistently understand content, regardless of the technology they're using.

1.4 Distinguishable

This guideline ensures the default presentation of components is easy to perceive for people with disabilities. An example is making sure users can clearly distinguish foreground information from background information.

The Success Criteria for this guideline expand on this:

1.4.1 Use of Color (Level A)

This SC ensures that color isn't the only way information is presented. For example, in a form field, color shouldn't be the only way to indicate a required field or an error. Instead, required fields should include the word "required" or an asterisk (*) alongside the color, and fields with errors should display error text along with the color. Similarly, links shouldn't rely on color alone to indicate they're clickable; they should also have additional styling, such as an underline.

This benefits people with visual impairments, as not everyone sees colors or perceives them in the same way.

1.4.2 Audio Control (Level A)

This SC ensures that if audio autoplay lasts more than 3 seconds, users have a way to turn it off or mute it. Autoplaying audio that lasts longer than 3 seconds is discouraged because it may interfere with a screen reader user's ability to locate the audio controls. Instead, audio should only play when the user explicitly initiates an action that clearly informs them about the audio playback.

This SC benefits users with visual impairments who rely on screen readers, as well as users with cognitive impairments or difficulty focusing when there's background sound.

1.4.3 Minimum Contrast (Level AA)

This SC ensures there's sufficient contrast between text and its background. It states that text and images of text must have a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large text. Large text is defined as text that's at least 18.5px bold or 24px normal. Logos have no contrast requirements.

This SC benefits people with low vision who struggle to read faint text.

1.4.4 Resize Text (Level AA)

This SC ensures users can resize text without assistive technology up to 200% without losing content or functionality. For example, using relative units like em instead of fixed units helps achieve this.

This SC benefits users with visual impairments, allowing them to comfortably adjust text size.

1.4.5 Images of Text (Level AA)

This Success Criterion ensures electronic text is used instead of images of text, especially when the same visual result can be achieved through styled text. Images of text should only be used when necessary, and if used, they should either be customizable or have a text alternative. This is because resizing or zooming an image of text may cause pixelation, making the content difficult to read.

This SC benefits people with visual impairments and those with cognitive impairments affecting reading.

1.4.6 Contrast (Enhanced) (Level AAA)

This SC is an enhanced version of 1.4.3 Minimum Contrast. It ensures even greater contrast, stating text and images of text must have a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text, unless the text is purely decorative.

This SC benefits people with low vision and those who cannot distinguish colors.

1.4.7 Low or No Background Audio (Level AAA)

This SC ensures that audio containing speech in the foreground should either:

• Have no background sounds.
• Have a way to turn off background sounds.
• Ensure background sounds are at least 20 decibels lower than the foreground audio.

This SC does not apply to audio CAPTCHA, audio logos, or music. It benefits people who are hard of hearing.

1.4.8 Visual Presentation (Level AAA)

This SC ensures users can adjust text styles to meet their preferences. Some of these preferences include:

• Selecting foreground and background colors.
• Adjusting content width to at most 80 characters (80ch).
• Changing justified text alignment.
• Adjusting line height (leading) to at least 1.5.
• Adjusting text size up to 200% without requiring horizontal scrolling.

Your content doesn't have to meet these criteria by default; however, it should allow users the ability to adjust these aspects.

This SC benefits users with certain visual or cognitive impairments. For instance, some people struggle to follow text when lines are too wide, and narrower blocks of text help them move easily from line to line.

1.4.9 Images of Text (No Exception) (Level AAA)

This SC builds on 1.4.5 Images of Text. It ensures that no images of text are used without exception.

This SC does not apply to logos or text that's part of a picture.

1.4.10 Reflow (Level AA)

This SC ensures text automatically rearranges itself (reflows) to fit the screen width when users zoom in. It states that content must remain clear, usable, and easy to read without requiring simultaneous horizontal and vertical scrolling when users zoom up to 400%.

When users zoom into a page, text should rearrange neatly into a single column rather than forcing horizontal scrolling. This arrangement is called "reflow." The best way to meet this SC is through responsive design, where pages adjust their layout based on screen size or zoom level. For example, content may be displayed in three columns on large screens but adjust to a single column when users zoom in.

Some content, such as maps, videos, and tables, naturally requires a two-dimensional layout and does not have to rearrange into a single column, as this would remove essential meaning.

This SC is similar to 1.4.4 Resize Text, but Resize Text ensures text can enlarge up to 200%, whereas Reflow ensures users don't need two-directional scrolling at 400% zoom.

This SC benefits people with low vision.

1.4.11 Non-text Contrast (Level AA)

This SC ensures interactive elements and essential graphics are clearly visible by providing adequate color contrast. It requires at least a 3:1 contrast ratio for:

• Interactive elements (user interface components): buttons, form fields, and links.
• Elements indicating states (e.g., active, selected) or essential parts of graphics needed to understand content.

This SC does not apply to disabled elements or elements styled by the browser itself. It benefits people with low vision.

1.4.12 Text Spacing (Level AA)

This SC ensures users can adjust spacing between lines, paragraphs, words, and letters to improve readability. Specifically, content should remain usable when users set:

• Line height (leading) to at least 1.5 times the font size.
• Paragraph spacing to at least 2 times the font size.
• Letter spacing to at least 0.12 times the font size.
• Word spacing to at least 0.16 times the font size.

This adjustment is particularly important for users with dyslexia or certain visual impairments who require additional spacing for comfortable reading.

1.4.13 Content on Hover or Focus (Level AA)

This SC ensures popups, tooltips, and dropdowns follow these rules:

• They can be dismissed without losing focus (e.g., pressing Esc, clicking outside, or other methods).
• They remain visible long enough for users to read.
• If interactive, they accept focus without disappearing.

This SC benefits users with visual impairments and cognitive impairments.

Final Thought and Ramblings

While some Success Criteria (SC) are straightforward, I still find it difficult to understand the differences between 1.4.8 Visual Presentation and 1.4.12 Text Spacing. They seem similar to me, but I'll be doing further reading to understand them better.

For color contrast testing, you can use Chrome DevTools' built-in contrast checker. However, it doesn't assess contrast ratios when. I also use the TPGi Color Contrast Analyser (CCA), which also supports testing for 1.4.11 Non-text Contrast (AA). These don't test contrast when background images are involved

When testing the Perceivable principle, you should also try navigating the page using a screen reader. This approach can help you uncover issues that might not even be explicitly covered in this principle.

Currently, my screen reader testing is limited to VoiceOver, as that's the only tool I have access to. However, as part of my goal to become a Web Accessibility Specialist, I'm making arrangements to get a PC so I can also test with JAWS and NVDA.

🎯 I really struggle with using VoiceOver on mobile, but I'll need to learn it at some point—I don't really have a choice!

Thank you for reading! I hope you enjoyed this post and found it helpful. See you in a day or two.

Resources

• 1. Perceivable
• Understanding Guideline 1.1: Text Alternatives
• Understanding Guideline 1.2: Time-based Media
• Understanding Guideline 1.3: Adaptable
• Understanding
• Integrated Audio
• Integrated Audio Contrast Ratio
• About Decibels