[Draft] Module 6: Multimedia and Animations [WIP] in [Draft] Designer Modules, Curricula on Web Accessibility
Introduction
Courses based on this module should:
- explain strategies that people with disabilities use to access multimedia contents, such as audio and video
- explain accessibility requirements for multimedia content, such as audio descriptions of visual information, captions (also known as subtitles), transcripts, and sign languages
Learning Outcomes for Module
Students should be able to:
- identify accessibility requirements for different types of audio and video content
- design user experiences for description, captions, transcripts, and sign languages, including:
- placement and spacing for alternatives to multimedia content
- mechanisms for turning on and off alternatives
- ways for users to interact with the alternatives
- identify accessibility issues of media player, including:
- evaluate the need for designing custom media players and select existing media players with support for accessibility where possible
- select media players with support for different methods of interaction, including mouse, keyboard, touch, and voice
- select media player controls that have clear and descriptive names, that are easy to find, and that are always reachable for users
- design mechanisms to control automatic audio or movement, including:
- mute and control the volume of auto-playing audio
- pause, stop, and hide moving, blinking, and auto-updating content, including animations and carousels
- identify related requirements for:
- developers to programmatically associate alternatives and descriptions to their corresponding media content
- developers to include accessibility support for media players
- content authors to provide appropriate text transcripts, captions, audio descriptions, and sign language
Competencies
Skills required for this module:
Students
- Foundation Prerequisites
- Designer Module 1: Visual Design
- Designer Module 2: Information Design
- Designer Module 3: Navigation Design
- Designer Module 4: Images and Graphics
- Basic knowledge of:
- Visual Design
- Prototyping
- Responsive Design
- Information Architecture
Instructors
- Applied expertise in teaching:
- WCAG Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)
- WCAG Success Criterion 1.2.2 Captions (Prerecorded)
- WCAG Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)
- WCAG Success Criterion 1.2.4 Captions (Live)
- WCAG Success Criterion 1.2.5 Audio Descriptions (Prerecorded)
- WCAG Success Criteria 1.4.2 Audio Control
- WCAG Success Criterion 1.4.6 Sign Language (prerecorded
- WCAG Success Criterion 2.2.2 Pause, Stop, Hide
- WCAG Success Criterion 2.3.1 Three Flashes or Below Threshold
- WCAG Success Criterion 3.2.1 On Focus
- WCAG Success Criterion 3.2.5 Change on Request
- In-depth knowledge of:
- Foundation Prerequisites
- Designer Module 1: Visual Design
- Designer Module 2: Information Design
- Designer Module 3: Navigation Design
- Designer Module 4: Images and Graphics
- Visual Design
- Prototyping
- Responsive Design
- Information Architecture
Topics to Teach
Topics to achieve the learning outcomes:
Topic: Alternatives to Multimedia Content
Audio description of visual information is essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts provide an alternative to visual and audio information.
Discuss the need for planning in the design phase to accommodate media alternatives such as audio description of visual information, captions, text transcripts, and sign language. Present mechanisms to turn on and off alternatives to multimedia content depending on user needs. Explain that these mechanisms need to have clear names and need to be always reachable for users. Explain that defining such mechanisms is a designer’s responsibility, whereas providing the alternatives is a responsibility shared with the content author.
Learning Outcomes for Topic
Students should be able to
- identify accessibility requirements for the different types of multimedia content, such as audio descriptions of visual information, captions, transcripts, and sign languages
- define the following alternatives to multimedia content:
- audio descriptions; descriptions to adequately get the visual information needed to understand the content
- captions; text versions of the speech and non-speech audio information needed to understand the content
- text transcripts; text that provides an alternative to visual and audio information
- sign language; the native language of some deaf people
- design mechanisms for controlling the volume of audio that plays automatically for more than 3 seconds
- design mechanisms to pause, stop, or hide alternatives to multimedia content that blink, move, or auto-update
- design the placement and user experience of alternatives for multimedia content, including audio descriptions, captions, transcripts, and sign language
- design mechanisms to turn on and off audio descriptions, captions, transcripts, and sign language
- design player controls that:
- have descriptive names
- are operable by keyboard
- are easy to find
- are always reachable for users
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Show examples of audio descriptions of visual information. Explain that audio descriptions are alternatives for people who cannot see the video. Explain that defining the mechanisms to enable and disable audio description of visual information is a designers’ responsibility, whereas providing the audio description is a responsibility shared with the content author.
- Show examples of captions. Explain that captions are alternatives for people who cannot hear the audio, and that they are useful in other situations. Explain that determining where to place captions is a designers’ responsibility, whereas providing such captions is a responsibility shared with the content author.
- Show examples of text transcripts. Explain that transcripts are alternatives for people who cannot hear the audio information and for people who cannot see the visual information. Explain that allocating the necessary space for the transcripts is a designers’ responsibility, whereas providing such transcripts is a responsibility shared with the content author.
- Show examples of sign language. Explain that sign language is essential for people who are deaf and who do not understand written language well. Explain that defining the mechanisms to enable and disable sign language is a designers’ responsibility, whereas providing the sign language interpretation is a responsibility shared with the content author.
- Show examples of accessible and inaccessible media players. Emphasize that it is generally more reliable to use an existing media player with support for accessibility than to designing one from scratch. Explain how accessible media player controls have appropriate contrast ratios, are operable by keyboard, and are easy to find. Emphasize that users need to be able to reach the controls even when the media is playing.
Ideas to Assess Knowledge for Topic
Optional ideas to assess knowledge:
- Short Answer Questions — Give students pieces of multimedia content and ask them where they would place their corresponding alternatives. Assess students’ understanding of the requirements for alternatives to multimedia content.
Topic: Movement and Animations
Show moving content, such as carousels and animations. Present mechanisms to avoid distractions, seizures and physical reactions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as using flashing that is below the accepted ratios where possible.
Learning Outcomes for Topic
Students should be able to:
- design mechanisms for pausing, stopping, or hiding any content that blinks, moves, or auto-updates, for example animations, carousels, and decorative gimmicks
- create designs that avoid flashing entirely or only flash below the acceptable thresholds
- create designs with enough time for users to read parts of moving content, for example different slides in a carousel
- define visual and non-visual identification of animated content and its different parts, for example identifying a carousel region and its different slides
- define focus order within animated contents, including how to move to different parts of the carousel and how to get to the carousel controls
- design mechanisms for stopping or controlling the volume of any audio that plays automatically for more than 3 seconds
Teaching Ideas for Topic
Optional ideas to teach the learning outcomes:
- Show examples of contents that move or blink, such as animations and carousels. Explain that these can cause problems for some users that cannot keep up with the pace of the auto-updating content. Emphasize that, in addition, these animations can cause seizures and physical reactions. For references on how to design user interfaces that allow to pause, stop, and hide moving, blinking, or auto-updating content, see the following techniques:
- G4: Allowing the content to be paused and restarted from where it was paused,
- G11: Creating content that blinks for less than 5 seconds,
- G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds),
- G186: Using a control in the Web page that stops moving, blinking, or auto-updating content, and
- G187: Using a technology to include blinking content that can be turned off via the user agent.
- Show examples of flashing content and explain that they can cause seizures and physical reactions for some people. Emphasize that all components of the content need to be below the general flash and red flash thresholds, as any flashing interferes with the ability to use the whole web page or application. For references on how to design interfaces that flash below the general flash and red flash thresholds or that flash below 3 seconds, see techniques G19: Ensuring that no component of the content flashes more than three times in any 1-second period and G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold.
- Show examples of interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preferences as well as technology specific properties to reduce or disable such animations.
- Demonstrate the use of a screen reader to navigate an application that plays audio automatically for more than 3 seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a mechanism to pause or control the volume of that audio. Explain that the operating system often provides such mechanism. For references on how to design interfaces with mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques:
Ideas to Assess Knowledge for Topic
Optional ideas to assess knowledge:
- Practical — Present students with instances of flashing content and ask them to determine if they are below the general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content.
- Practical — Present students with a user interface containing animations and ask them to make them accessible. Assess how students define mechanisms to reduce or disable the animations.
Ideas to Assess Knowledge for Module
Optional ideas to assess knowledge:
- Portfolio — Students include accessible video and audio contents on a website. Assess how students understand the accessibility requirements of video and audio content, including transcripts for audio, audio descriptions, and sign language.
Teaching Resources
Suggested resources to support your teaching:
- Making Audio and Video Media Accessible — Covers captions/subtitles, audio description of visual information, descriptive transcripts, and sign language. Includes guidance for creating new videos, and on media player accessibility. Introduces user experiences and benefits to organizations.
- Designing for Web Accessibility — Tips for user interface and visual design.
- How People with Disabilities Use the Web — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- Video Captions (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Keyboard Compatibility (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Colors with Good Contrast (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Clear Layout and Design (Web Accessibility Perspective) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- Large Links, Buttons, and Controls (Web Accessibility Perspectives) — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.
- WCAG — Address accessibility of web content on desktops, laptops, tablets, and mobile devices.