Video, sound and motion: what has to come with them

A video on the home page counts as a modern appearance. But it is also the content with the most preconditions: whoever cannot hear it needs text. Whoever cannot see it needs a description. Whoever wants neither to hear nor to see it needs a switch to stop it.

This article covers three things that belong together: video and sound, automatically running motion such as carousels and animations, and flashing.

The four kinds of alternatives

The specialist literature distinguishes four ways of making time-based content accessible. They are often confused in everyday use, and the differences matter in practice:

Subtitles are a synchronous text rendering of what is spoken. An English film with German subtitles. They also help people who can hear but do not understand the wording — with unclear pronunciation or in a foreign language.

Captions (in German erweiterte Untertitel) are meant for deaf and hard-of-hearing users and contain more than the speech: relevant sounds, music that means something, and who is speaking. “[door slams]”, “[speaker:]”.

Transcripts are a complete text version. They go beyond what is spoken and also describe important visual and audio content: background noises, significant scenes, gestures that are decisive for understanding. A transcript is a document, not text shown on screen.

Audio description is an additional soundtrack that describes what can be seen. For blind users it is the only way to purely visual information.

On top of that, as a fifth way, comes sign language — a translation shown on screen. That is level AAA and in practice a special case for public bodies.

(Rheinwerk, Barrierefreie Webseiten, ch. 7.10)

What is required at which level

The requirements depend on what the video contains and whether it is recorded or live:

Criterion	What is required	Level
1.2.1	Text alternative for audio-only or video-only content (recorded)	A
1.2.2	Captions for recorded videos with sound	A
1.2.3	Text or audio alternative for recorded videos with sound	A
1.2.4	Captions for live broadcasts	AA
1.2.5	Audio description for recorded videos	AA
1.2.6	Sign language	AAA
1.2.8	Full text alternative	AAA

For a normal business website that means in practice: captions are level A — the lowest level, not negotiable. Audio description is level AA.

With an image film, audio description is often the harder part, because a lot is shown and little is said. But there is a simple way out many overlook: if everything that happens in the picture is said anyway, no separate audio description is needed. That can be taken into account in the script — and it is considerably cheaper than producing a second soundtrack afterwards.

A requirement from EN 301 549 that is rarely mentioned: captions may deviate from the sound by at most 100 milliseconds. Captions that lag behind are about as unpleasant for the viewer as sound that comes a second late. And for people who also lip-read, they are unusable.

(Rheinwerk, Barrierefreie Webseiten, ch. 7.12)

Captions are not only for deaf people

This is the argument with which I actually convince clients, and it is well supported: more than 100 empirical studies show that captions improve comprehension, attention and memory — for all viewers, not only deaf ones.

Who benefits especially:

• People watching the video in a foreign language.
• Children and adults learning to read.
• And, the biggest share: everyone who watches the video without sound. On the train, in the open-plan office, in the evening next to a sleeping child. On mobile devices a considerable share of all videos runs muted.

That makes captions one of the few points in this field where the accessibility requirement and the business interest demand exactly the same thing.

How you get captions

Three ways:

Write them yourself or have them written. The most accurate, the most effort.

Automatic speech recognition, then correct. YouTube creates captions automatically, and they can be edited afterwards. That is the route I recommend for most clients: the machine does 90 percent, you correct technical terms, names and punctuation. For a five-minute video that is twenty minutes of work.

It does not work without editing. Automatic captions reliably fail on proper names, technical terms and dialect — that is, on exactly the words that matter for your business.

A service provider. For legally sensitive or especially long content.

Technically, the caption file usually comes in WebVTT format. A plain text file with timings:

WEBVTT

1
00:00:01.000 --> 00:00:05.000
Welcome to our introduction to the accessibility audit.

2
00:00:05.500 --> 00:00:10.000
We will show you how the process works.

It is embedded through a <track> element in the video:

<video controls>
  <source src="company-film.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
  <track kind="descriptions" src="audio-description.vtt" srclang="en" label="English">
</video>

Modern browsers then show the captions automatically, and the user switches them on and off in the video controls. Their appearance can be adjusted through CSS — make sure there is enough contrast between text and background and that the captions stay up long enough to be read.

If you embed your video from YouTube or Vimeo, the provider takes over this part. Then the question shifts to: is the player itself usable? That is not a given. Check in particular whether the embedded player can be operated completely by keyboard — and whether you can tab out of it again.

(Rheinwerk, Barrierefreie Webseiten, ch. 7.12)

Embedded videos: three topics at once

A video hosted elsewhere brings three questions that are best decided together:

Loading time. Video files are large. A self-hosted video needs a fast server, otherwise it stutters — and on a mobile network it is then unusable. Providers like YouTube and Vimeo deliver through distributed servers and adjust the resolution to the device automatically. That is their real technical advantage.

Usability. It lies with the provider. What you did not build yourself, you cannot repair yourself either.

Data protection. An embedded video connects to the third-party server as soon as the page loads — with everything that is transmitted in the process. That needs a privacy-compliant embed, usually through consent before anything is loaded at all. There is an article of its own on that.

For short videos on a small website, self-hosting is often the simpler route — it saves the consent question completely. With longer or many videos, the provider wins.

Motion that starts by itself

Success criterion 2.2.2 “Pause, Stop, Hide”, level A.

The rule applies when all three conditions are met: something moves, flashes or scrolls, it starts automatically, it lasts longer than five seconds, and it is shown in parallel with other content. Then there has to be a way to pause, stop or hide it.

What falls under it:

• Image carousels on the home page that advance automatically.
• Marquees and news tickers.
• Animated backgrounds and video loops in the header.
• Pop-ups like “10 people are looking at this offer right now”.
• Animated GIFs that run permanently.

Why this is more than a formality: motion draws the eye — in evolutionary terms, motion means danger. For people with attention disorders, with certain cognitive impairments and for everyone who is easily distracted while reading, an automatically running carousel next to the text is a real barrier. You cannot look away.

The only exception: the motion is an essential part of an activity — for example a countdown in online banking that shows how long the session still has.

The solution for a carousel: a clearly visible pause button above or below the carousel that stops the automatic advance and then changes to “Play”. A stop button that ends it permanently also makes sense.

My honest recommendation on this: in most cases the better rebuild is to leave the carousel out. Automatically advancing home page sliders are among the building blocks with the worst ratio of effort to effect — they cost loading time, create usability work, and hardly anyone sees the second and third slide. A single good image with a clear message works more strongly.

(Rheinwerk, Barrierefreie Webseiten, ch. 8.1)

Flashing

Success criterion 2.3.1 “Three Flashes or Below Threshold”, level A: nothing on the page may flash more than three times per second — unless the flashing is below the set thresholds for area and brightness.

The reason is serious: flashing light can trigger a seizure in people with photosensitive epilepsy. Most of those affected only learn of their condition through the first seizure. The best-known incident: in 1997 in Japan, more than 700 children were taken to hospital after a cartoon broadcast, about 500 of them with seizures.

The thresholds for the exception are complicated — they calculate with solid angles and fields of view. For screen content, as an approximation: a rectangle of 341 × 256 pixels at a resolution of 1024 × 768 corresponds to about a 10-degree field of view.

Because practically nobody calculates that, the stricter version at level AAA (criterion 2.3.2) is the simpler and more sensible rule: no more than three flashes or blinks per second, regardless of brightness and area.

In practice: check videos, animations and GIFs to make sure nothing blinks faster than three times per second. Whoever wants to know exactly can use the PEAT tool from the University of Maryland — it only reads the AVI format, though, so the file has to be converted.

For most business websites this point is not critical. It becomes relevant with advertising videos with fast cuts and with animations in the header.

(Rheinwerk, Barrierefreie Webseiten, ch. 7.6)

How to check it yourself

Sound off. Watch your video without sound. Do you understand what it is about? If not, captions are missing.

Picture off. Listen to your video without looking. Are you missing something important? Then you need an audio description — or you change the script so that what is shown is also said.

Proofread the captions. If they were generated automatically: read them through completely once. Company names, product names and technical terms are reliably wrong.

The keyboard test on the player. Tab to the video, then try: play, pause, volume, captions on, tab out again. With embedded players this fails more often than with self-hosted ones.

The five-second question. Go through your home page and see what moves without you having done anything. For each of these: is there a way to stop it?

The stopwatch look at animations. Everything that changes faster than three times per second should be checked.

What to do

Captions first. They are level A, they help everyone, and with automatic recognition plus correction they are done in a manageable time.

A transcript as well, where it makes sense. A transcript below the video is extra work, but it has a side effect that is often underestimated: it is text that search engines and AI systems can read. Otherwise the content of your video does not exist for them.

Switch off carousels or give them a pause button. The former is usually better.

With automatically starting sound: do not. There is no good reason for it, and browsers increasingly prevent it by themselves.

And for the next video: think of the captions while shooting, not afterwards. Whoever writes the script anyway already has the caption text almost finished. And whoever makes sure while writing that what is shown is also said saves the audio description entirely.

Sources

• Rheinwerk, Barrierefreie Webseiten, ch. 7.10 (time-based media) — the five kinds of time-based media, the four ways of providing alternatives, the distinction between subtitles, captions and transcripts with their respective content, and the finding from more than 100 empirical studies that captions improve comprehension, attention and memory for all viewers (Gernsbacher, Video Captions Benefit Everyone).
• Rheinwerk, Barrierefreie Webseiten, ch. 7.12 (video) — the complete mapping of success criteria 1.2.1 to 1.2.9 to their conformance levels, the three disadvantages of video (loading time, embedding, data protection) and the reason providers like YouTube and Vimeo have a technical advantage, the requirement from EN 301 549 ch. 7 on preserving the alternatives during format conversion and on a deviation of at most 100 milliseconds, the three ways of creating captions together with the need to edit automatic recognition, the WebVTT format with an example, embedding through <track>, the notes on contrast and reading time of the captions, and the note on lip synchronisation.
• Rheinwerk, Barrierefreie Webseiten, ch. 7.6 (flashing and blinking) — the distinction between flashing and blinking, photosensitive epilepsy and the 1997 incident in Japan with more than 700 affected children, WCAG 2.3.1 with the threshold of three flashes per second and the area approximation of 341 × 256 pixels at 1024 × 768, the stricter version 2.3.2 at level AAA, and the PEAT tool with its restriction to the AVI format.
• Rheinwerk, Barrierefreie Webseiten, ch. 8.1 (navigation) — WCAG 2.2.2 with the three conditions automatic start, duration over five seconds and parallel display, the examples carousel and pop-ups, the reasoning about the effect of motion on attention, the exception for essential motion using the example of a session countdown, and the solution through pause and stop buttons.
• Atlas, accessibility/criteria/ — classification of the named success criteria by principle, guideline and conformance level.
• Own audit practice — the recommendation to avoid audio description through a script in which what is shown is said, the assessment of self-hosting versus embedding for small websites, the classification of automatically running home page sliders, the sound-off and picture-off checks, the keyboard test on the embedded player, and the note on the benefit of a transcript for search engines and AI systems.