Accessible Media: Supports All Senses
Source: https://accessibility.huit.harvard.edu/images-and-media-developers Parent: https://accessibility.huit.harvard.edu/developers
Images can improve usability by making orientation and interaction elements easy to recognize and use. Developers must ensure the interface is accessible and usable without access to visual cues, and that people who need a custom display can still access images. In addition, media accessibility requires that any player used to present audio and video is accessible to assistive technology and keyboard users.
When developers focus on accessible media:
- All image-based elements of the user interface are accessible to people who cannot accessible visual information.
- Controls for operating media are usable with assistive technology and do not require use of a pointing device, like a mouse.
Provide Accessible Images
Images can be an effective way to convey meaning, such as to provide additional information to text content or to assign labels to buttons. Text alternatives are vital for people who can’t see them. When icons are added as images, the best practice is the same as for providing alternative text for images. When other methods are used, such as background images or icon fonts, additional care is needed to ensure that their meanings are available to screen reader users, people with reading difficulties, and those who use Windows Contrast themes or who need to apply a user-defined style sheet that changes fonts.
- Provide appropriate text alternatives for images. See Content Creators: Describe the content of images for best practices for writing text alternatives.
- Make sure icon fonts have accessible text alternatives. If the icon is purely decorative, a text alternative is not necessary and the icon instead should include the aria-hidden attribute. Reliable ways for providing accessible text alternatives vary depending on how the icon is provided. Provide a text equivalent for the icon as text in HTML, and use CSS to hide the text equivalent visually while making that text available to screen readers.
Testing
When an image is being used for labeling a control (such as a button) or for providing information (such as a logo):
- If it is provided as an image, does it contain a meaningful text alternative?
- If it is provided using an icon font or a CSS background image, is there a text alternative that’s read by a screen reader?
Provide an Accessible Media Player
Audio and video should be provided using an accessible media player. To support media accessibility features, including captions and audio descriptions, use a player with controls that are clearly identified and that can be operated using the keyboard (see the section on Interaction for general requirements).
- Do not use autoplay. Leave it to the user to decide when to play the media.
- Ensure that controls are keyboard accessible. This means all controls are operable using only the keyboard and do not require the use of a mouse.
- Support alternative formats. The media player should support captions and audio descriptions.
Testing
For every page that includes a media player:
- Does the audio or video start playing only in response to a user action?
- Are all of the controls reachable using the keyboard? Do they respond to standard keyboard commands? Is there a clear focus indicator?
- Does each control have a descriptive name? Is the current state of each control clear? For example, does the Play/Pause button convey whether the video is playing or paused?
- Can the player toggle the display of captions?
- Can the player play audio descriptions?
More Information
- Understanding WCAG SC 1.1.1—Non-text Content (WAI)
- Understanding WCAG SC 1.3.1—Info and Relationships (WAI)
- Understanding WCAG SC 4.1.2—Name, Role, Value (WAI)
- Icon fonts and user-defined stylesheets (Juicy Studio)
- Understanding SC 2.1.1—Keyboard (WAI)
- Understanding SC 2.4.7—Focus Visible (WAI)
Related Techniques
### ✎ Technique: Choosing a media player
Media player accessibility is essential for video content. Evaluate the accessibility and cross-device compatibility of the media player that comes with your video-distribution platform.
Icon fonts are a popular and effective method for providing scalable symbols that can be used to label controls and provide graphical information. The information provided by icons also needs to be available to people who can’t see them.
### ✎ Technique: Alternative text
Each image requires alternative text that is equivalent to the information it conveys, unless the image is purely decorative and provides no useful information. You need to be careful about what value you give the alt attribute.