Module 6: Multimedia and Animations in Designer Modules, Curricula on Web Accessibility

• Foundation Prerequisites
• Prior Designer Modules
• Basic knowledge of:
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture

• 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 Description (Prerecorded)
  • WCAG Success Criterion 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
• In-depth knowledge of:
  • Foundation Prerequisites
  • Prior Designer Modules
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture

Descriptions are essential for people who don’t see visual media content. Captions are essential for people who don’t hear audio content. Text transcripts provide an alternative to both visual and audio information.

Discuss the need for planning in the design phase to accommodate alternatives to multimedia content such as description, captions, text transcripts, and sign languages. Present methods to control alternatives to multimedia content depending on user needs. Explain that these methods must have clear names and must be reachable by all users. Explain that defining such methods 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, including description, captions, transcripts, and sign languages
• describe the following alternatives to multimedia content:
  • description of visual information
  • captions
  • transcripts
  • sign language
• design user experiences of alternatives for multimedia content, including:
  • placement of the alternatives
  • methods to control the alternatives
• evaluate the need for designing custom media players
• select existing media players with support for accessibility when possible
• describe characteristics of accessible media player controls, including:
  • keyboard support
  • visible keyboard focus indicators
  • clear labels
  • sufficient contrast between colors for text, controls, and backgrounds

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of description of visual information. Emphasize how these alternatives describe the visual information (including images of text) for people who cannot see the videos. Explain that different standards and policies may refer to description of visual information using different terms, such as audio description, video description, and described videos. Explain that defining the methods to control the description is a designer’s responsibility, whereas providing the description is a responsibility shared with the content author.
• Show examples of captions. Explain that captions are a synchronized text version of the speech and non-speech audio information needed to understand the content. Explain that different standards and policies may refer to captions using different terms, such as subtitles. Explain that defining the methods to control the captions, determining where to place captions, and in what color and font they are presented are designer’s responsibilities. Providing such captions is a responsibility shared with the content author.
• Show examples of text transcripts. Explain that transcripts are a text version of the speech and non-speech audio information needed to understand the content. Explain that defining the placement and spacing for the transcripts is a designer’s responsibility, whereas providing the transcripts is a responsibility shared with the content author.
• Show examples of sign languages. Reflect on the different sign languages that exist depending on region and country. Explain that sign languages are essential for some people who are deaf and use written language as their second language. Mention that some deaf people do not use sign languages. Explain that defining the methods to enable and disable sign languages is a designer’s 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 design one from scratch. Emphasize how accessible media players are operable by keyboard, make keyboard focus visible, have clear labels, have appropriate contrast ratios, and are easy to find on the page. For an overview on skills needed to develop a media player, expected functionality, and existing players, see the resource Making Audio and Video Media Accessible, Media players.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Short Answer Questions — Ask students what description, captions, transcripts, and sign language mean in the context of accessible media content. Assess how students define alternatives to multimedia content.
• Practical — Give students pieces of multimedia content and ask them to define the user experiences for the alternatives of those pieces. Assess how students define placement, interactions, and methods to control the alternatives.
• Practical — Ask students to research for existing media players that can be integrated in a web page and to describe their support for accessibility. Assess how students recognize keyboard support, visible keyboard focus indicators, clear labels, and contrast ratio of controls.

Discuss different types of moving content, including carousels and animations. Present methods to avoid seizures, physical reactions, distractions, and unpredictable keyboard focus management caused by moving content. For example, support for pausing, stopping, or hiding moving content, as well as minimizing blinking and flashing.

Caution: Do not show blinking or flashing content that can cause seizures. Moving content can cause nausea and other reactions. If you choose to show examples, give students enough time to privately opt out of seeing the content.

Learning Outcomes for Topic

Students should be able to:

• specify methods 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
• identify and communicate animated content and its different parts visually and non-visually, for example a carousel region and its different slides
• specify the focus order within animated content, including how to move to different parts of the carousel and how to get to the carousel controls
• specify methods for stopping or controlling the volume of any audio that plays automatically for more than three seconds

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Invite students to research about different types of moving content, such as carousels and animations. Explain that moving content can cause distraction and anxiety for several types of users. Emphasize that some animation frequencies are also known to cause seizures and physical reactions for certain users. For references on how to design 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.
• Emphasize that designers must avoid flashing content, as it can create seizures and other physical reactions. Encourage students to learn more about the different types of seizures caused by flashes. Explain the requirements for this content to flash only up to three times in one second or to be below the general flash and red flash thresholds. For information on the accessibility requirements for flashing content, see Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold.
• Explain that interactions triggered by animations, such as additional movements when scrolling and decorative gimmicks, 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 three seconds. Explain that the playing audio interferes with the ability to hear the screen reader output. Emphasize that there should be a method to pause or control the volume of that audio. Explain that the operating system often provides such method. For references on how to design interfaces with methods 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, and
  • G171: Playing sounds only on user request.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Practical — Ask students to include methods for reducing or disabling animations in a user interface. Assess how students specify methods to reduce or disable animations.
• Short Answer Questions — Ask students about the accepted general flash and red flash thresholds. Assess how students understand accessibility requirements for flashing content.
• Practical — Give students examples of web pages using carousels. Ask them to evaluate the carousel’s support for accessibility. Assess how students understand accessibility requirements for carousels.