Introduction

Images and videos are powerful communication tools, but without proper accessibility measures, they create barriers for users with sensory impairments. This lecture note explores how to make visual and auditory media accessible through alternative text for images, captions for videos, and audio descriptions for visual content. Making media accessible goes beyond compliance with standards like WCAG—it benefits everyone. Accessible media improves SEO, supports users in situational contexts like noisy or quiet environments, and ensures that all users, regardless of ability, can access the same information.

Images

Making static images accessible relies primarily on Alternative Text (Alt Text). However, not every image needs a description. The first step is determining whether an image requires alternative text. This decision depends entirely on the image's function and context within the page.

• Informative images convey content essential to understanding the page. They communicate ideas, data, emotions, or actions that would be lost without them. For example, a product photograph in an online store provides critical information for purchase decisions. An icon used as a button—like a magnifying glass for search—performs a specific function that must be communicated to all users. A simple test: if removing the image creates a gap in meaning or functionality, it needs descriptive alt text.
• Decorative images serve only aesthetic purposes—they add no meaningful content or context to the page. Examples include ornamental borders, background patterns, or stock photos used for visual interest. For these images, use an empty alt attribute (alt=""). This tells assistive technologies to skip the image, preventing unnecessary interruptions for screen reader users.

Effective alt text balances brevity with precision. Most screen readers cut off descriptions around 125 characters, so be concise. However, don't sacrifice meaning for brevity. Context matters most—explain the image's purpose and relevance, not just its appearance. For example, instead of "A dog," write "A Golden Retriever guiding a visually impaired person across a street." This conveys the image's function within the page.

Avoid redundancy. Screen readers already announce that an element is an image, so don't begin alt text with phrases like "Image of..." or "Picture of..." This wastes character space without adding value. When an image contains text—like a logo with a slogan or an informational graphic with embedded words—reproduce that text exactly in the alt text. This ensures all users receive the same information, regardless of how they access the content.

When an image contains complex information like charts, diagrams, or infographics, a simple alt text description is insufficient to convey the full meaning. Instead, a two-part approach is recommended. First, use a short alt attribute to identify the image type and general content, such as "Bar chart showing sales growth 2020-2023". Then, provide a more detailed description through surrounding text, a caption, or a link to a long-form text description. For data-heavy visuals like charts, the most accessible solution is often to include a simple HTML table adjacent to the chart that presents the same information in a structured format. When dealing with infographics that contain substantial text and visual information, avoid trying to compress everything into the alt tag. Instead, provide a complete transcript of all text contained within the graphic immediately following the image. This ensures that users relying on assistive technologies have access to the same level of detail as sighted users.

Video and Audio Captions

Captions provide a text version of spoken dialogue and important non-speech sounds. They are essential for Deaf and Hard of Hearing users.

Captions come in two main forms: closed captions and open captions. Closed captions are text overlays that users can toggle on or off through the video player. The player renders the text dynamically, allowing users to customize the appearance—adjusting font size, color, and background to suit their preferences. This flexibility makes closed captions the preferred format for accessibility. They accommodate individual needs and make content searchable and indexable by search engines.

Open captions—sometimes called "burned-in" or "hardcoded" captions—are permanently embedded into the video as part of the visual image. Unlike closed captions, viewers cannot turn them off or customize them. While this may seem limiting, open captions serve an important purpose: they guarantee captions will appear regardless of platform support. This makes them valuable for social media platforms where videos autoplay without sound, or where technical limitations prevent separate caption tracks. The trade-off is that open captions cannot be resized or repositioned, which may reduce readability for some users.

In providing captions, you should strive for the following qualities:

• Accuracy: Spelling, punctuation, and grammar must be correct for clear comprehension.
• Synchronization: Text must appear at the same time the corresponding audio is spoken.
• Speaker Identification: When multiple speakers are present, captions must identify who is speaking (e.g., [John]: Hello there.).
• Sound Effects: Meaningful sounds must be captioned in brackets (e.g., [door slams], [upbeat music plays]).

Audio Descriptions (AD)