Alt text for `Video` component about hydrogen-v1

[scottdixon]

Good thought @cathryngriffiths!

@Shopify/accessibility - can we please have some guidance on this one? Does it make sense to add a description inside <video>? Or would the user rely on context surrounding the video?

I guess the ideal state is captioning and transcripts, which is provided via additional files. Maybe the component could have a tracks prop?

[svinkle]

True, video does not have an alt attribute, but providing a short description still holds value.

How you'd implement the description depends on the video embed. For example:

• YouTube or Vimeo would embed an iframe. The best approach here would be to use a title attribute on the iframe and apply the description to this attribute value.
• If you've using native video element, you can supply a description via aria-label attribute on the video.

What's important is to keep the description concise yet informative (think YouTube video title.) Other content which is also critical for other user groups:

• Closed captions for d/Deaf or hard of hearing users (supported by all platforms – native video relies on track attributes)
• Audio descriptions for blind users to describe aloud non-spoken content (most platforms do not support multiple audio tracks – may need to produce an "alternate" video)
• Plain text transcripts for deafblind users who rely on refreshable braille readers (ideally on the same page, use a disclosure to show/hide [also helps to boost SEO])

Review "[Captions, transcripts, and audio descriptions]" on the Vault for more details.

[benjaminsehl]

Closing this issue for now — noting that in the Demo Store reference code we'll be sure to pull Scott and team in to review accessibility and ensure we're providing reference for best practices.