Considerations for providing alternative text to video poster graphics

[scottaohara]

Splitting out from #6636, so as to not sidetrack that issue.

Per the potential proposal (comment) to allow for an img to be used as the mechanism to provide a video element its poster image, and thus allow for the image to be lazy loaded - this opens up the possibility to allow this poster image to have an alt attribute.

<video ...>
 <source ...>
 <picture>
   <source ...>
   <img alt="description specific to poster graphic"
            loading="lazy" decode="async" srcset="..." sizes="...">
 </picture>
</video>

Poster images for videos presently have no way to allow authors to declare alternative text for the poster image specifically. Using aria-label on the video element can be done - but as a way to name the video, and would not be a good naming mechanism for the poster image since that goes away after the video starts to load.

It's not at all uncommon that a poster image is used to display a 'title' card of sorts - rather than showing a still frame from the video - which may contain text or other graphical information that visually provides content to users, but is unavailable to users of AT.

If the proposal to use an image was accepted as the resolution to the above linked issue, then the poster image could use the alt attribute to provide this description, and AT could discover the graphic as a child of the video element (which since videos already are implemented with nested elements, should already be possible for AT to reach the image if described). When the poster is no longer available - thus the image being removed / set to display: none (however implemented) - then so too would the graphic and its description no longer be available to AT.

If the mentioned proposal does not move forward, then I would hope this issue could be used to think up a new (or re-look at a previously proposed) way to provide posters alternative text.

[michael-n-cooper]

APA +1s this issue.

[zcorpan]

What should the a11y mapping be for the poster img?

[scottaohara]

a graphic would make the most sense, so long as it's actually been provided an accessible name. all the other parts of the video UI are exposed as the elements they are - e.g., buttons, range sliders, etc. if not provided a name, it'd make sense to continue to expose it as a decorative image. seems that may be what firefox is already doing with their implementation of the video element - using a decorative graphic? At least, there's an unnamed graphic that shows up in the a11y tree when inspecting with their browser dev tools.

i suppose the role description of the graphic role could potentially be modified to make it more clear it's specifically a video poster graphic. But I personally think that's a minor detail, and just making it possible to name and actually expose a graphic is far more important.

[mbgower]

@scottaohara some examples may be useful in this discussion. Can you either link to some examples, or provide and describe some screen shots?

[scottaohara]

@mbgower are you looking for examples of videos with poster graphics?