What's the proper way to add text accessibility to silent elements?

Question

I have several tooltips that surface an animation on hover. At first we used Gifs but our team decided to replace the gifs with .mp4 files. These are animations that show examples of how to use a given option. They have no sound.

But now I'm unable to find the proper way to add accessibility for screenreaders. Apparently you can't use alt text on video elements. title is not meant for accessibility. I understand there is a track element you're supposed to add for captions. But We don't want visible captions on these video animations. We just want alt text that explains that there's an animation showing an example of how to use the selected option.

Answer 1

There is, not yet, a proper way to do this natively. I've found this other post on SO about controlling <track> with CSS. So including but hiding it won't do the trick.

You could create a transcript of your animation and include it below the video, hidden or shown in view. Like this example does. Audio transcript example.

What you also could do is build your own tooltip. One which is shown when hovering the video and uses the WAI-ARIA role="tooltip" and aria-hidden attributes to show that its a tooltip and if it is visible. Inside these tooltips you can place whatever text you want about the video. Just make sure that the aria-hidden attribute is false when hovering and true when not.

<span role="tooltip" aria-hidden="false">Your tooltip content</span>

Check these examples on how to create accessible tooltips.

• Aria Tooltip Example
• Tooltips simulated using ARIA

Answer 2

video elements can't have the tooltip role so you should enclose the element in a div with this role. Then, as this role does require a name and has no accessible content, use aria-label with your accessible alternative:

<div role="tooltip" aria-label="Your accessible description goes here">
   <video />
</div>

Answer 3

If you're set against using captions, you may want to consider the following options:

1. Create a text document that tells the same story and presents the same information as the prerecorded video-only content
2. Provide an audio track describing the information in the video

In either case, it would make sense that the alternative format (i.e. text or audio) would be placed near the video on the page.

Answer 4

You can use the longdesc attribute in the video tag, which contains an URL/link to a text file with a description of the animation.

Answer 5

Add captions, it isn't about what you want it is about what you users need / expect.

Non-impaired users will not see the captions anyway as they are off by default but can switch them on If They Want (if this isn't the case you need a different video player).

If you start with [SILENT VIDEO - captions explain steps] then your deaf users can switch off the instructions If They Want

Blind users will thank you for providing captions as they can then find out what the video contains (as this is an instructional video you may find that a separate set of instructions may work better to describe the steps in detail)

TL; DR - use captions in production - there is no reason not to use captions in a production environment, several reasons to use them.

EDIT / ADDITIONAL

If you really want to make sure your video has no subtitles by default the following JS will disable all of them by default.

for (var i = 0; i < video.textTracks.length; i++) {
   video.textTracks[i].mode = 'hidden';
}