video don't use alt-attribute

[aschei]

Describe the bug Embedding a video with an alt-text will be rendered using the structure

<figure>
  <video/>
  <figcaption>(alt text goes here)</figcaption>
</figure>

Screenreaders handle alt-attributes quite nicely and struggle with the figcaption-Element (which also has a different meaning as the alt-attribute). The alt-text should go into an alt-attribute at the video-Element.

To Reproduce

Steps to reproduce the behavior:

1. Post a video with an alt-text
2. Look at the source code of the post.

Expected behavior

the <video> element should contain the alt-text in the alt-attribute.

Details

• Platform: desktop
• Platform version: current
• App version:

[mozzius]

Hi! I wasn't sure what the correct way to provide alt text for a video is - <video> does not support the alt attribute. Would aria-label be more suitable than a <figcaption>?

[aschei]

Thx, @mozzius for looking into this, much appreciated. I did a little research, and you are right, alt-tag is unfortunately not suitable for the video tag. There is <track kind="description" sub element as the perfect way to support visually impaired users, but it requires an audio track describing the video - not text.

I suggest to follow "Example 1" here: https://www.w3.org/WAI/standards-guidelines/act/rules/c3232f/proposed/ (Simply add the description below the video in text element.)

With css-styling this can be done in a way that does not limit other users (e.g. having a small "ALT" tag that shows the description on click or something).

Other than that I will check with visually impaired people in my bubble if they can refer to perfect examples of videos with screen-reader-compatible textual descriptions in other community driven platforms.

Looking forward, you guys are awesome.

[mozzius]

Yeah - is just the subtitles, which we support in addition the alt field. Thank you for looking into this!

[daira]

I suggest to follow "Example 1" here: https://www.w3.org/WAI/standards-guidelines/act/rules/c3232f/proposed/ (Simply add the description below the video in text element.)

With css-styling this can be done in a way that does not limit other users (e.g. having a small "ALT" tag that shows the description on click or something).

I agree, and this would also fix #5959 (for platforms using HTML; not sure whether the mobile app is implemented as a webview or not).

[daira]

Can I also suggest that a prefix of the alt text, say the first sentence when that is short enough, be displayed by default? The motivation here is to make the presence of alt text and some idea of its content (i.e. whether it's just a placeholder) more visible to all users regardless of impairments, further normalising it and reinforcing social expectations about it being included.

This can and should be done in a way that preserves the logical content, e.g.

<video controls>...</video>
<p>Alt: Video of a cute rabbit with floppy ears. <span class="alt-text-continuation">It is nibbling a piece of lettuce.</span></p>

A screen reader will treat this as just a normal paragraph with both sentences, but a span of class "alt-text-continuation" can be set in the CSS to render as "... [expand]" or "... [more]" until it is clicked/tapped.