shom,
@shom@fosstodon.org avatar

friends, I need some guidance.

I tried adding video alt-text on my website [1], but apparently HTML5 <video> doesn't support the alt attribute. @mozilla docs [2] suggests adding text-tracks, so I added a VTT file for closed captioning, that feels hacky.

Is this really the best option or are there better ways? My video doesn't have a voice track, it's better described with alt-text.

[1] https://shom.dev/posts/20240204_filmposter-with-gum-hugo-photo-post-bliss/
[2] https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia#video_text_tracks

kc,
@kc@chaos.social avatar

@shom @mozilla IMO the best practice would be to provide an audio-described version of the media with an added voice track for the description. If that's not an option, put a description as a regular and visible paragraph element either directly in front of or after the video - you could also choose to link another page if it is of significant length. But reading subtitles for descriptions is something nobody can do without issue.

zoltandulac,

@kc @shom @mozilla

This is the best way. Audio Descriptions makes your video WCAG AA compliant. Adding transcripts make it AAA compliant.

(Captions are WCAG A)

aardrian,
@aardrian@toot.cafe avatar

@zoltandulac @kc @shom @mozilla

To pile on, AD support in <video> is poor at best:
https://adrianroselli.com/2023/12/ad-support-in-html-video.html

The transcript as plain text paragraph is safest.

zoltandulac,

@aardrian @kc @shom @mozilla TIL that Safari actually supports this to a certain degree. I have done the two video approach (one with and one without AD) but have also used AblePlayer to have a VTT file with the audio descriptions with the computer reading them (I set it up to pause when reading the descriptions so there was no overlap with the audio in the video itself).

zoltandulac,

@aardrian @kc @shom @mozilla

Have you ever tried any other video player to implement VTT audio descriptions successfully? AblePlayer requires jQuery, so looking for alternatives.

aardrian,
@aardrian@toot.cafe avatar

@zoltandulac
I have not. There are so many out there, that I just don’t have the time (paying clients) to warrant diving into them.

But the browsers’ in-built video players I am happy to test. Partly so I can make recommendations to clients based on their needs versus just grabbing a piece of bloatware off the shelf.

@kc @shom @mozilla

shom,
@shom@fosstodon.org avatar

@aardrian @zoltandulac @kc @mozilla thanks for the great feedback everyone. I'll try to figure out multi/separate track. I wish the browser built-in video player had better support for multiple audio tracks. This is going to discourage me from making video clips even when that's better medium (or quality compared to embedding a gif).

aardrian,
@aardrian@toot.cafe avatar

@shom
If you embed an animated GIF, you still have to have AD or a transcript.

So making it into a video gives you a smaller file. And lets users pause/stop.

So maybe don’t fall back to GIFs.

@zoltandulac @kc @mozilla

shom,
@shom@fosstodon.org avatar

@aardrian thanks for pointing that out, that's not what I meant. I meant using screenshots with alt-text instead. I would of course also include alt-text for short gifs but like you mentioned a video is far better. I'll need to improve the efficiency of my workflow (or use a few screenshots instead of a quick animation) to make up for lack of tools.
@zoltandulac @kc @mozilla

aardrian,
@aardrian@toot.cafe avatar

@shom
Gotcha.

You may ignore me as you see fit. Which is what most folks do. I rarely cry.

@zoltandulac @kc @mozilla

  • All
  • Subscribed
  • Moderated
  • Favorites
  • accessibility
  • DreamBathrooms
  • ngwrru68w68
  • modclub
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • InstantRegret
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • mdbf
  • GTA5RPClips
  • provamag3
  • ethstaker
  • normalnudes
  • tester
  • osvaldo12
  • everett
  • cubers
  • tacticalgear
  • anitta
  • megavids
  • Leos
  • cisconetworking
  • JUstTest
  • lostlight
  • All magazines