A4/D5. Difficulty locating or accessing multimedia controls

Situation Definition:

A situation that arises from problems related to difficulty locating or activating controls to play audio/video (A/V) files, difficulty recognizing whether audio or video output is generated, or difficulty recognizing the length or progress level of the A/V material playing in a DL.

Factor(s) Leading to the Situation:

    • Complex information presentation:

    • Complex information presentation:

    • Inadequate feedback: dynamic

    • Inadequate help information:

    • Inappropriate labeling:

    • Incompatibility: media player incompatible

Guideline or Design Recommendation:

    1. Ensure the use of multimedia players with minimal player controls
    2. Label each multimedia player control in a way that clearly conveys its purpose and function
    3. Ensure all multimedia player controls are efficiently accessible and operable, including keyboard control and compatibility with

    4. Provide recognizable information about the length and progress of an A/V file playing in a DL
    5. Provide metadata information about multimedia items
    6. Provide instructions and help for accessing audio/video files

Rationale and Objective:

DLs offer a range of audio/video content. The complexity of the DL structure, excessive graphic content, and unlabeled controls for manipulating multimedia files discourage

users from trying to access these files (1). Clear instructions and keyboard-accessible interface design should be provided to locate the media and the controls to play them (2) (3). Textual format, such as alt text and

–

 for these controls are required. Progress status is typically indicated visually (e.g., using a progress bar or similar graphic) in a format that is inaccessible to BVI users. Textual equivalents should be provided stating the percentage played or remaining in an accessible textual format or using an accessible label indicating the name of the object and the level of loading progress. Alternative information, such as

can be used if the visual content in web-based audio/video files provides insufficient information to describe the content to BVI users (4). Any

, such as media players, should be accessible by BVI users.

Techniques and Methods:

1.1. Utilize media players with the simplest and most standardized controls (play, pause, stop, etc.)
2.1. Provide meaningful labels for multimedia controls that accurately reflect their state (e.g., play/pause)
3.1. Provide basic keyboard accessible multimedia controls with shortcuts (e.g., play, stop, seek, rewind, forward, and speed control)
3.2. Avoid using media players unless they provide an accessible alternative that is usable by a screen reader
4.1. Provide sound or text indicators when loading, playing, and stopping audio/video files
4.2. Provide sound or text indicators that present the general time estimate and video length
4.3. Make elements such as scripts and applets to present loading status directly accessible or compatible with assistive technologies
5.1. Specify the availability of audio or video components or length of multimedia files
6.1. Provide instructions and general context-sensitive help or tips for accessing audio/video files

Recommended Features:

1.1. Simple and standardized controls (See example 1.1/2.1.a)
2.1. Meaningful labels on controls (See example 2.1.b)
3.1. Keyboard-accessible controls (See example 3.1)
4.1/4.2. Sound or text indicators (See example 4.1/4.2)
4.3. Accessible loading status using alternative text (See example 4.3)
5.1. Metadata (See example 5.1)
6.1. Context-sensitive help or tips (See example 6.1)

Examples:

1.1/2.1.a. Simple and standardized controls: Good design

Controls for video and audio are fully accessible and workable by keyboard navigation, and the order is also logical; there are not too many controls (Library of Congress).

Video controls for A Map of the Cattle Drive video with options including Play, Pause, Forward 10 seconds, Rewind 10 seconds, Replay, Mute, Volume Up, and Volume Down

2.1.b. Meaningful Labels on controls: Good design

Button labels appear as “Play” (Able player)

Video player with Play label when hover over triangular play symbol

3.1. Keyboard accessible controls: Good design and how-to example

Aria-label used in button labels for appearing “Play” and “Pause” (e.g., aria-label = “play”)

Code in DOM Explorer with highlighted code: <button class="play-button" aria-label="Play" onclick="" type="submit" value="submit">...</button>

4.1/4.2. Sound or text indicators: How-to example

Alternative text for loading image or status such as “Video is being loaded. 50% of loading.”

<div style= “visibility: hidden; display: none; right: 0px;” role= “alertdialog” aria-busy= “true” aria-live= “assertive”><img id= “processing” src= “PT_LOADING.gif” alt= “Processing… please wait” title=”” /></div>

4.3. Accessible loading status using alternative text: Good design

Using ARIA-live= “assertive” or “polite” on the loading status indicator with an alternative text.

Accessible Progress Bar example which reads "This HTML5 progress bar has been implemented with aria-live= "polite" as the only ARIA in us. The separate announcements by screen readers for the progress bar and textual updates are achieved by putting them in separate live regions."

https://labs.levelaccess.com/index.php/Progress_Bar_with_ARIA_Live_Regions

5.1. Metadata: Good design

Interface for video item with emphasis added to Description field which reads "Note: there is no audio."

    • Descriptions for the length of an audio/video file

Search results page for videos, results include the duration of the video after a short description of the content

6.1. Context-sensitive help or tips: Good design

Providing detailed help for how to play video files

Help information titled "Working with Video files". Included steps to watch videos: 1) Click the center of the item to launch the Detail page. Some video files may have an image as their thumbnail, while some may have the default video icon as their thumbnail. 2) On the Detail page, use the video buttons to play, pause, or drag the progress bar to jump to a section of the video.

Related Resources:

    1. Xie, I., Babu, R., Joo, S., & Fuller, P. (2015). Using digital libraries non-visually: understanding the help-seeking situations of blind users. Information Research: An International Electronic Journal, 20(2), n2.
    2. Dolson, J. (2016), How to Make Videos Accessible for Blind, Disabled Users. Retrieved from https://www.practicalecommerce.com/How-to-Make-Videos-Accessible-for-Blind-Disabled-Users
    3. Afar, A. (2017). How to design accessible mobile experiences for the blind. Retrieved from https://willowtreeapps.com/ideas/how-to-design-accessible-mobile-experiences-for-the-blind
    4. The Audio Description Project. (n.d.). What is Audio Description? Retrieved from https://acb.org/adp/ad.html
    5. 3PlayMedia. (2020). Transcription vs. Captioning – What’s the difference?. Retrieved from https://www.3playmedia.com/2018/10/10/transcription-vs-captioning/
    6. 10ths and Decimals. National Science Digital Library.  (2018). Retrieved from http://nsdl.oercommons.org/courses/10th-s-and-decimals/view
    7. Able Player – Fully accessible cross-browser HTML5 media player. (2018). Retrieved from https://ableplayer.github.io/ableplayer/
    8. AccessibilityOz: Video accessibility principles. (2018). Retrieved from https://www.accessibilityoz.com/factsheets/video/video-factsheet/
    9. DigitalA11Y.Accessible HTML5 Media Players@Resources Retrieved from https://www.digitala11y.com/accessible-jquery-html5-media-players/
    10. DPLA Video: Miscellaneous Video. (2018). Retrieved from https://dp.la/item/8abf2c3f4d5415613dadaf07fc238292?q=video&type=%22moving%20image%22&page=1
    11. HTML Living Standard. (2019). Retrieved from https://html.spec.whatwg.org/#attr-media-autoplay
    12. Use YouTube with a screen reader (https://support.google.com/youtube/answer/189278?hl=en)
    13. Library of Congress Digital Collections. (2018). Retrieved from https://www.loc.gov/item/00694020
    14. Rodriguez-Sanchez, M. C., Moreno-Alvarez, M. A., Martin, E., Borromeo, S., & Hernandez-Tamames, J. A. (2014). Accessible smartphones for blind users: A case study for a wayfinding system. Expert Systems with Applications, 41(16), 7210-7222.
    15. Sherwin, K. (2014). Progress Indicators Make a Slow System Less Insufferable. Retrieved from https://www.nngroup.com/articles/progress-indicators/
    16. WebAim. (2013). Captions, Transcripts, and Audio Descriptions. https://webaim.org/techniques/captions/#ad
    17. W3C. (2018). WCAG 2.1 Guideline 1.4.2 Audio Control. Retrieved from https://www.w3.org/TR/WCAG21/#audio-control
    18. W3C. (2018). WCAG 2.1 Guideline 2.1. Keyboard accessible. Retrieved from https://www.w3.org/TR/WCAG21/#keyboard-accessible
    19. W3C. (2018). WCAG 2.1 Guideline 2.2.2 Pause, Stop, Hide. Retrieved from https://www.w3.org/TR/WCAG21/#pause-stop-hide
    20. W3C. (2018). WCAG 2.1 Guideline 2.4.6 Headings and Labels. Retrieved from https://www.w3.org/TR/WCAG21/#headings-and-labels
    21. W3C. (2018). WCAG 2.1 Guideline 1.2.5 Audio Description (Prerecorded). Retrieved from https://www.w3.org/WAI/WCAG21/Understanding/audio-description-prerecorded.html
    22. W3C. (2018). WCAG 2.1 Guideline 1.2.7 Extended Audio Description. Retrieved from https://www.w3.org/WAI/WCAG21/Understanding/extended-audio-description-prerecorded.html
    23. W3C. (2018). WCAG 2.1 Guideline 1.2. Time-Based Media. Retrieved from https://www.w3.org/TR/WCAG21/#time-based-media
    24. W3C. (2018).  WCAG 2.1 Guideline 1.2, Time-Based Media: Provide Alternatives for Time-Based Media. Retrieved from https://www.w3.org/TR/WCAG21/#time-based-media
    25. W3C. (2018). WCAG 2.1 Guideline 2.4 Navigable. Retrieved from https://www.w3.org/TR/WCAG21/#navigable

See also:

Help-seeking Situations > A. Difficulty Accessing Information

Help-seeking Situations > D. Difficulty locating specific information, items, or features

Contact Us: Professor Iris Xie (hiris@uwm.edu), University of Wisconsin – Milwaukee