Skip to main content

Accessibility UI Guidelines: Multimedia

Multimedia

2.1. Multimedia

2.1.1 Alternative Representation

All multimedia elements, including images, video, audio, and graphs, must provide alternative representations to ensure web content is fully inclusive and accessible to all users.

Examples:

  • Descriptive ALT Attributes for Images:

    Provide meaningful alternative text for non-decorative images to aid users who rely on screen readers.

    <img src="profile.jpg" alt="Portrait of the Queen smiling">
  • ARIA Hidden for Decorative Images: Use aria-hidden="true" for decorative images to prevent screen readers from announcing them. 
    <img src="decorative-border.png" alt="" aria-hidden="true">
  • Captions and Context with FIGCAPTION:

    Use figcaption within figure tags to provide context to images and other media.

    
<figure>
    <img src="diagram.png" alt="Flowchart of the user registration process">
    <figcaption>Figure 1: User Registration Flowchart</figcaption>
</figure>
  • Responsive and Optimised Images:

    Ensure images are responsive and optimised for faster loading across different devices.

    
<img src="responsive-image.jpg" alt="Responsive design example" style="max-width: 100%; height: auto;">
  • Accessible Audio Elements:

    Provide transcripts and captions for audio content to support users with hearing impairments.

    
<audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
    Your browser does not support the audio element.
</audio>

    Basic example: You could include a transcript below the audio player.

    
<div>
    <h3>Podcast Transcript</h3>
    <p>[Transcript text goes here...]</p>
</div>
  • Accessible SVG Graphs and Charts:

    Use svg elements with appropriate aria attributes and titles to describe the content for screen readers.

    
<svg role="img" aria-labelledby="svgTitle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <title id="svgTitle">Sales Growth Chart for 2023</title>
    <!-- SVG content goes here -->
</svg>

    Provide a detailed description of the SVG content below the graphic for additional context.

    
<div>
    <h3>Sales Growth Chart for 2023</h3>
    <p>This chart illustrates a steady increase in sales from January to December, with a peak in November.</p>
</div>
  • Responsive and Optimised Multimedia:

    Ensure all multimedia content is responsive and optimised for faster loading to improve accessibility and user experience on various devices.

    
<video controls style="max-width: 100%; height: auto;">
    <source src="responsive-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
  • Accessible Canvas Elements:

    Provide alternative descriptions and fallback content for <canvas> elements to support users who rely on screen readers.

    
<canvas id="chart" aria-label="Sales Growth Chart for 2023" role="img">
    Your browser does not support the canvas element. Please see the
    <a href="#chart-description">description</a>
    of this chart.
</canvas>
  • Map

    Consider adding aria-label to a map element and providing a detailed textual description with a link, screen readers can convey the information represented in the map to users with visual impairments.

            
            <img src="world-map.jpg" alt="Interactive world map showing major cities" usemap="#worldmap">
            <map name="worldmap" aria-label="Interactive World Map" role="img">
                <area shape="rect" coords="34,44,270,350" alt="New York City" href="https://www.nyc.gov">
                <area shape="circle" coords="337,300,44" alt="Los Angeles" href="https://www.lacity.org">
                Your browser does not support the map element. Please see the
                <a href="#map-description">description</a>
                of this map.
            </map>
            <div id="map-description" hidden>
                This interactive map highlights major cities such as New York City and Los Angeles. Click on each city to visit its official website.
            </div>

2.1.2 Avoid Autoplay

Avoid autoplaying media; provide clear user controls for playback.

2.1.3 Controls

Provide clear indicators of media status such as stop, play, playback and pause for example.

2.1.4 Flashing items

Prevent seizure-inducing flashing or rapidly changing visuals.

2.1.5 Video Subtitles(Captions)

Provide subtitles to assist individuals with hearing impairments, those in noisy environments, or those for whom the spoken language is not their first language. Subtitles can also be beneficial for individuals experiencing cognitive overload, such as those with ADHD.

2.1.6 Video Transcripts

Video transcripts provide a text version of the audio content in videos, making it accessible to those with hearing impairments, individuals in noisy environments, or those whose first language isn't the video's spoken language. Transcripts also support users experiencing cognitive overloads, such as those with ADHD, by allowing them to read content at their own pace.

2.1.7 Sign Language This consideration should be evaluated based on the target audience's needs, especially for content aimed at users who are deaf or hard of hearing.