[Draft] Module 5: Multimedia and Animations

• Prerequisites for students
• Module 2: Flexible and Responsive Design
• Module 3: Navigation
• Module 4: Information Design

• 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 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:
  • Prerequisites for students
  • Visual Design
  • Responsive Design
  • Information Architecture

Audio descriptions are essential for people who cannot see the visuals. Captions are essential for people who cannot hear the audio. Text transcripts are useful to provide an alternative to visual and audio information. Discuss the need for mechanisms to enable or disable alternatives to multimedia content depending on user needs. Explain that these mechanisms need to be always reachable for users, that they need to have clear names, and that they should not disappear when the media starts playing.

Learning Outcomes for Topic

Students should be able to

• identify accessibility requirements for the different types of multimedia content, such as text transcripts, audio descriptions for visual information, and captions and sign language for audio information
• design user interfaces that consider availability, placement, and spacing for text alternatives for speech and non-speech audio information
• design user interfaces with mechanisms to enable audio descriptions, captions, and sign language
• design user interfaces with buttons that have descriptive names and that are easy to find
• design user interfaces with player controls that are always reachable and that do not disappear when the multimedia content starts to play

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of captions. Explain that these are needed for people who cannot hear the audio, and that they are useful in other situations. Explain that identifying the situations where captions are needed is a designer’s responsibility, whereas providing such captions is a responsibility shared with the content author. For reference on how to provide captions, see @@@
• Show examples of audio described content. Explain that it is needed for people who cannot see the video. Explain that identifying the situations where audio described content is needed is a designer’s responsibility, whereas providing the audio description is a responsibility shared with the content author. For references on how to provide audio descriptions, see @@@

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Short Answer Questions — Give students some pieces of multimedia content and ask them whether or not they should contain captions and audio descriptions. Assess students’ understanding of the requirements for alternatives to multimedia content.

Show examples of different types of animations. Explain that animations can cause seizures or physical reactions for some people, so additional requirements when designing animations should be considered.

Learning Outcomes for Topic

Students should be able to:

• design user interfaces that support pausing, stopping, or hiding any content that blinks, moves, or auto-updates
• design user interfaces that support flashing below the general flash and red flash thresholds or with content that does not flash more than three times in any one second
• design user interfaces that support disabling motion animation triggered by interaction, such as additional animations when scrolling
• design user interfaces that support 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
  • 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 or 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 support flashing below the general flash and red flash thresholds or that support flashing 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. Explain that these animations can cause distraction and vestibular disorders (such as dizziness, nausea, and headaches) for some people. Discuss the use of preference and 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, such as a video player with audio that is longer 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 that support mechanisms to pause or control the volume of any audio that plays automatically, see the following techniques:
  • G60: Playing a sound that turns off automatically within three seconds
  • G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically
  • G171: Playing sounds only on user request.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• 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.

[To be developed].