Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Identify areas where alt text is missing, currently, for images/video. #2983

Closed
MackenzieHartung opened this issue Aug 7, 2019 · 6 comments
Assignees
Labels
Task Tasks which do not involve engineering
Milestone

Comments

@MackenzieHartung
Copy link

Relates to: Support “alt”-text / title (WIP) editor for images/video

@barklund
Copy link
Contributor

barklund commented Sep 3, 2019

There are 4 types of embedded elements allowed in a story currently:

Inline images
Inline images can be placed directly through the block editor and an alternative text can be directly provided:

Background images
Images can also be placed in the background covering the entire story. Alternative titles can be provided, but it is a bit tricky and has to be done via the media editor - it cannot be done "inline" in the block editor.

Block editor missing alt field Media editor with alt field
Screenshot 2019-09-03 at 23 30 58 Screenshot 2019-09-03 at 23 31 45

This can definitely be done better and easier - e.g. by repeating the alternative text input directly in the block editor.

Inline and background videos
Videos can't have alternative texts at all in the spec for <amp-video>. The editor also doesn't support adding alternative texts neither in the block editor nor in the media editor.

The conventional accessibility approach on the web for videos is to include captions and/or transcripts for the video. This is supported by the <amp-video> tag through <track> child nodes.

An alternative approach is to add a fallback element which is displayed before the video loads (or if no compatible video source is found) where any regular HTML element can be used. However, this is not intended for accessibility purposes and the handling of this content by screen readers is poor at best.

It would be quite simple to allow editors to upload a track/caption file in the block editor for a video element (either inline or background), and include it in the generated AMP Story, but it feels like a poor man's solution, that very few would be able to use, as it requires external software to generate a valid track file. It's not hard, but requires a lot of effort.

A proper UX solution would be to allow the story editor to add captions to the video in some embedded tool directly in e.g. the media editor and generate a track file from this. This is however a fairly complex task.

BBC has created a reasonably competent React module achieving this exact purpose (MIT licensed, 10 contributors, active development ATTOW), but it would probably require a thorough rewrite to fit in the WP-React structure.

Recommendation
The recommendation from me is to:
Update: New recommendation below

  • Create a ticket to add the option of displaying and setting/overwriting the alt text for background images (with default inherited from media editor) directly in the block editor.
  • Create a ticket to consider how to add caption support for videos in the future - either by the naïve short-sighted approach of requiring third-party creation of caption files or by rewriting/reusing the BBC embedded caption creator.

@westonruter
Copy link
Member

Videos can't have alternative texts at all in the spec for <amp-video>. The editor also doesn't support adding alternative texts neither in the block editor nor in the media editor.

In #3006 the title of a video attachment is provided on the amp-video element via the aria-label attribute.

@barklund
Copy link
Contributor

barklund commented Sep 3, 2019

In #3006 the title of a video attachment is provided on the amp-video element via the aria-label attribute.

Ah, it's not mentioned explicitly in the documentation, but I guess support is implied on any element. And thanks for pointing me to this ticket!

I do now see that background videos are added an aria-label which is the title from the media editor, which defaults to the filename without extension of the uploaded file and can be edited in the media editor.

Inline videos do not have an aria-label attribute, regardless of their title in the media editor.

Updated recommendation
My updated recommendation is as follows (with the first three being similar, but not identical):

  • Create a ticket to add the option of setting the alt text for background images (with default inherited from media editor) directly in the block editor.
  • Create a ticket to add the option of setting the alt text for background videos (with default inherited from title from media editor) directly in the block editor.
  • Create a ticket to add the option of setting the alt text for inline videos (with default inherited from title from media editor) directly in the block editor.
  • Create a ticket to consider how to add caption support for videos in the future - either by the naïve short-sighted approach of requiring third-party creation of caption files or by rewriting/reusing the BBC embedded caption creator.

@swissspidy
Copy link
Collaborator

  • Create a ticket to add the option of setting the alt text for background images (with default inherited from media editor) directly in the block editor.
  • Create a ticket to add the option of setting the alt text for background videos (with default inherited from title from media editor) directly in the block editor.

IMO these two things can be done in 1 ticket, as there is only 1 background media section where one can configure both video and image.

Create a ticket to consider how to add caption support for videos in the future - either by the naïve short-sighted approach of requiring third-party creation of caption files or by rewriting/reusing the BBC embedded caption creator.

How relevant is this once we have good aria-labels? I don't want us to get sidetracked here. Would these be good enough already or is it absolutely necessary to have captions? If so, shouldn't this be solved in a WordPress context as a whole?

Also, let's keep in mind that the editor should allow anyone to easily create good, immersive stories without having to worry about such low-level things. Instead, we should consider providing such data automatically. Take YouTube's automatic captioning as an example.

@barklund
Copy link
Contributor

barklund commented Sep 4, 2019

  • Create a ticket to add the option of setting the alt text for background images (with default inherited from media editor) directly in the block editor.
  • Create a ticket to add the option of setting the alt text for background videos (with default inherited from title from media editor) directly in the block editor.

IMO these two things can be done in 1 ticket, as there is only 1 background media section where one can configure both video and image.

Seems like a good idea.

Create a ticket to consider how to add caption support for videos in the future - either by the naïve short-sighted approach of requiring third-party creation of caption files or by rewriting/reusing the BBC embedded caption creator.

How relevant is this once we have good aria-labels?

I think the accessible label is a good start and common practice around the web. Adding caption support is a pretty huge extra task, that is probably best saved for someone else. If people need it to provide accessibility, embedding youtube videos will be the best way to go about it for now.

@swissspidy
Copy link
Collaborator

Agreed. Although worth noting that AMP Stories currently don't support YouTube videos. And caption support is something that should probably be better integrated in WP itself or a separate plugin.

Closing this one as #3185 and #3186 have been created.

@swissspidy swissspidy added the Task Tasks which do not involve engineering label Sep 5, 2019
@swissspidy swissspidy added this to the v1.3 milestone Sep 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Task Tasks which do not involve engineering
Projects
None yet
Development

No branches or pull requests

4 participants