Perceivable

Contents

  1. Text alternatives
  2. Time-based media
  3. Adaptable
  4. Distinguishable

1.1 Text alternatives

1.1.1 Non-text content (Level A)

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

I have written several blog posts on the subject of alt text. It is the first guideline and this is something that anyone can do, with a little bit of training and practice, to ensure their content is inclusive. Please follow the links below to access blog posts, including how-to videos and detailed information.

In a recent survey by WebAIM, 66% of accessibility failures on website home pages were due to missing alt text. Missing alt text, whether on a webpage, social media or in documents, mean that people who use screen readers are excluded from accessing your full content.

1.2 Time-based media

This covers audio and video content, which can be pre-recorded or live. There are two different issues that need to be considered here: video is usually visual content, and could therefore exclude people with sight impairments; audio could exclude people with hearing impairments. It is therefore important to provide captions, audio description or some alternative format, so that everybody can access your content.

This section is split into several subsections, as there are many combinations to consider. I have written blog posts on most of these, and included audio and video content which shows how you can adhere to the guidelines at both A and AA level.

1.2.1 Audio only and video only (Level A)

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labelled as such:
  • Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
  • Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

The following posts should help you with this criterion:

1.2.2 Captions (pre-recorded) (Level A)

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

You may want to start by having a look at my blog post about producing captions Opens in new window. This shows how people without specialist software can caption their video content.

Learn how to add captions to a video in PowerPoint

Coming soon - Adobe Premiere Pro now has an auto-transcription tool, which gives video editors more options for transcribing and producing captions. I was part of a user trial for this new tool and I love it! It is now available for all users, so I hope to make a how-to video very soon.

1.2.3 Audio description or media alternative (Level A)

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

This is an A level guidance and I will cover it in 1.2.5, at AA level.

1.2.4 Captions - live (Level AA)

Captions are provided for all live audio content in synchronized media.

Again, you may want to start by looking at my blog post on live captions Opens in new window. I have since used the captioning tool on Zoom more and hope to produce a video to show how this works in the near future.

1.2.5 Audio description (pre-recorded) (Level AA)

Audio description is provided for all prerecorded video content in synchronized media.

My blog post for this guideline is in two parts. Part 1Opens in new window covers the theory behind this and a description of how to achieve it. Part 2 Opens in new window shows a completed video with audio description.

1.3 Adaptable

1.3.1 Info and relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

When a sighted person looks at content, it is easy for them to spot headings, lists, tables and other visual formatting. They look different and they are used to make it easier to understand information. A blind or visually impaired person cannot access this information unless content has been created in a way that their screen reader can access. This means taking a little time to learn the correct ways of creating such content.

1.3.2 Meaningful sequence (Level A)

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Although Word, and to a certain extent, html automatically read in a logical order, there are other commonly used applications that need programming to do this. Select from the list below:

1.3.3 Sensory charcteristics (Level A)

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, colour, size, visual location, orientation, or sound.

This guideline looks at instructions and information that rely purely on a particular sense. For example, if I asked you to click on a red circle to view my blog post, that could be tricky for someone with a visual impairment. So it is better to avoid that kind of thing.

Learn about sensory characteristics

1.3.4 Orientation (Level AA)

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

This is no less important than the other guidelines but it is rare that I see non-conformance with it.

Learn about orientation

1.3.5 Identify input purpose (Level AA)

The purpose of each input field collecting information about the user can be programmatically determined when:
  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

This one is only really for people who use html and other web coding. It doesn't apply to forms in documents.

Learn how to code the input purpose

1.4 Distinguishable

1.4.1 Use of colour (Level A)

Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Colour must not be used as the only visual means of conveying information. One of the places I see this the most is in Excel spreadsheets, where colour is use in pie charts and other visuals. It's okay to use colour but there must be a text alternative as well.

Learn how to use colour in webpages

Learn how to use colour correctly in Excel

1.4.2 Audio control (Level A)

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

This is largely taken care of now by Chromium browsers disabling the autoplay attribute, but just in case you were trying to find a way around that, learn about the audio control criterion.

1.4.3 Contrast (minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement.

Earlier, I mentioned some research that found 66% of WCAG fails were due to missing alt text. This was the second most common reason for failure. The most common reason, at 86.3%, is poor colour contrast. I wrote a post about colour contrast Opens in new window a while ago, but I am now producing some application specific guidance to supplement this.

1.4.4 Resize text (Level AA)

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Learn how to enable resizing of text

1.4.5 Images of text (Level AA)

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
  • Customisable: The image of text can be visually customised to the user's requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed.

Learn about images of text

1.4.10 Reflow (Level AA)

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels. .
Except for parts of the content which require two-dimensional layout for usage or meaning.

Learn how to achieve Reflow

1.4.11 Non-text contrast (Level AA)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent colours.
  • User interface components
  • Graphical objects

This is an interesting criterion. When WCAG 2.2 is published, it is likely that this will also become a separate criterion about focus elements having sufficient contrast, but for now, they are wrapped up in here. Basically, anything that has colour and carries meaning, must have a minimum contrast of 3:1.

How to meet non-text contrast

1.4.12 Text spacing (Level AA)

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

1.4.13 Content on hover or focus (Level AA)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
  • Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
  • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
  • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

This one turned out to be more complicated than I expected. I spent a long time playing with Javascript to write this post.

Learn how to code additional content that passes content on hover or focus.

Clicky