[Draft] Module 6: 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 video. Captions and text alternatives are essential for people who cannot hear the audio.

Learning Outcomes for Topic

Students should be able to

• identify and distinguish the different types of multimedia content, such as prerecorded versus live, synchronous versus asynchronous audio and video
• create designs that support equivalent text alternatives for prerecorded audio-only content
• create designs that support text alternatives and alternative audio tracks for a prerecorded video-only content that present equivalent information
• create designs that allow to provide captions and audio descriptions for any prerecorded and live audio content in synchronized media
• create designs that allow to provide sign language interpretation for all prerecorded audio content in synchronized media

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