Accessible Images and Multimedia

In Ancient Egypt, every sculpture, painting, and relief on a temple wall had its description - often carved alongside in the form of hieroglyphs. Today we must do the same for visual content on the internet, so that blind and visually impaired people can understand what our images and multimedia depict.

Alt Text

The

alt

attribute is the most important element of image accessibility. The screen reader reads it instead of showing the image.

Rules for Writing Alt Text

1<!-- 1. Describe WHAT is in the image, not what the file looks like -->
2<!-- BAD -->
3<img src="IMG_0042.jpg" alt="IMG_0042.jpg">
4<img src="pyramid.jpg" alt="pyramid">
5
6<!-- GOOD -->
7<img src="pyramid.jpg"
8     alt="The Great Pyramid of Giza against a sunset sky">
9
10<!-- 2. Be concise - 1-2 sentences -->
11<!-- BAD - too long -->
12<img src="mask.jpg"
13     alt="In the photo we see the golden death mask of the young
14     pharaoh Tutankhamun, which was discovered by Howard
15     Carter in 1922 in the Valley of the Kings and weighs about 11 kg
16     of pure gold with inlays of lapis lazuli and turquoise">
17
18<!-- GOOD -->
19<img src="mask.jpg"
20     alt="Golden death mask of pharaoh Tutankhamun with lapis lazuli inlays">

When Should Alt Be Empty?

Decorative images that do not carry informational content should have an empty alt attribute:

1<!-- Decorative separator line -->
2<img src="border-pattern.png" alt="">
3
4<!-- Icon next to text that describes it -->
5<button>
6    <img src="search-icon.png" alt="">
7    Search
8</button>
9<!-- The text "Search" already describes the function, the icon is decorative -->
10
11<!-- Decorative background - better to use CSS -->
12<div style="background-image: url('papyrus-bg.jpg')">
13    <p>Article content...</p>
14</div>

The figure and figcaption Elements

1<figure>
2    <img src="rosetta-stone.jpg"
3         alt="The Rosetta Stone with three types of writing: hieroglyphs, Demotic script, and Greek">
4    <figcaption>
5        The Rosetta Stone (196 BCE) - the key to deciphering hieroglyphs,
6        discovered in 1799 by Napoleon's soldiers
7    </figcaption>
8</figure>

<figcaption>

is a caption visible to all users, while

alt

is a description intended specifically for screen readers.

Accessible Video

Captions

1<video controls>
2    <source src="exhibition-tour.mp4" type="video/mp4">
3
4    <!-- Captions for deaf and hard of hearing -->
5    <track kind="captions" src="captions-en.vtt"
6           srclang="en" label="English" default>
7
8    <!-- Subtitles in another language -->
9    <track kind="subtitles" src="subtitles-pl.vtt"
10           srclang="pl" label="Polish">
11
12    Your browser does not support the video element.
13</video>

Difference Between Captions and Subtitles:

• Captions - for deaf and hard of hearing, also include sound descriptions:

  [background music]

  ,

  [footstep sounds]

• Subtitles - translation of dialogues to another language

WebVTT Format

1WEBVTT
2
300:00:01.000 --> 00:00:04.000
4Welcome to the Ancient Egypt Museum.
5
600:00:04.500 --> 00:00:08.000
7We begin our journey from the Main Hall.
8
900:00:08.500 --> 00:00:12.000
10[footsteps on marble floor]

Accessible Audio

1<figure>
2    <figcaption>
3        <h3>Audiobook: The Story of Cleopatra</h3>
4    </figcaption>
5    <audio controls>
6        <source src="cleopatra.mp3" type="audio/mpeg">
7        Your browser does not support the audio element.
8    </audio>
9    <!-- Transcript for deaf and hard of hearing -->
10    <details>
11        <summary>Recording Transcript</summary>
12        <p>Cleopatra VII Philopator, the last ruler
13        of the Ptolemaic dynasty...</p>
14    </details>
15</figure>

Accessible SVG

1<!-- SVG as informational image -->
2<svg role="img" aria-labelledby="chart-title chart-desc">
3    <title id="chart-title">Museum visitor count</title>
4    <desc id="chart-desc">
5        Bar chart showing visitor growth
6        from 50,000 in 2020 to 120,000 in 2024.
7    </desc>
8    <!-- SVG elements -->
9</svg>
10
11<!-- Decorative SVG -->
12<svg aria-hidden="true" focusable="false">
13    <!-- decorative graphic -->
14</svg>

Prefers-reduced-motion

Some users are sensitive to animations - they can cause dizziness or nausea:

1/* Default animation */
2.slide-in {
3    animation: slideIn 0.5s ease-in-out;
4}
5
6/* Disable animation for users who prefer it */
7@media (prefers-reduced-motion: reduce) {
8    .slide-in {
9        animation: none;
10    }
11
12    * {
13        transition-duration: 0.01ms !important;
14        animation-duration: 0.01ms !important;
15    }
16}

Accessible multimedia is like descriptions next to Egyptian reliefs - they allow everyone to understand the message, regardless of whether they "see" the original or rely on a description.