The Wayback Machine - https://web.archive.org/web/20220916160353/https://github.com/sveltejs/svelte/issues/5967
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

This warning should be removed - A11y: Media elements must have a <track kind="captions"> #5967

Open
taw opened this issue Feb 6, 2021 · 9 comments

Comments

@taw
Copy link

taw commented Feb 6, 2021

To reproduce. Open svelte repl or any svelte project, add audio or video tag:

<audio src="https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" controls />

Expected:

  • it just works and compiler is happy

What actually happens:

  • A11y: Media elements must have a <track kind="captions"> (1:0)

Reasons this warning needs to be removed:

  • Browsers do not even support <track> for <audio> in any way whatsoever
  • Even for videos, track tags are not in any kind of widespread use
  • There's no accessibility value of empty <track kind="caption"> which linter wants people to add
  • As far as I can tell, what linter wants - track without src - is not even valid according to spec! "The src attribute gives the address of the text track data. The value must be a valid non-empty URL potentially surrounded by spaces. This attribute must be present."
  • (this is completely unlike empty alt attribute on img which is meaningfully different from no alt for historical reasons)
  • Vast majority of audio/video content does not have and will never have any kind of captions
  • For a lot of use cases, it wouldn't even make sense (same as a lot of imgs can't even have any meaningful nonempty alt)
@geoffrich
Copy link
Member

geoffrich commented Feb 8, 2021

I agree that it makes sense to remove this check for <audio> elements:

However, the same is not true for the corresponding rule for <video> elements and browser support is good. I think it still makes sense to encourage captions on videos. The warning can always be ignored in the component using <!-- svelte-ignore a11y-media-has-caption -->.

As a side note, I don't read the warning as suggesting you add an empty <track kind="caption"> -- it's implied that you add a src. We could make the rule require a src as well to make this clear.

@geoffrich
Copy link
Member

geoffrich commented Feb 8, 2021

Also note that the Svelte tutorial currently has a compiler warning for missing audio captions. Either the rule should not check audio elements or the tutorial should be updated to resolve the warning. This is also a case where it wouldn't make sense to have captions even if audio captions were supported since it's music only, no speech.

@taw
Copy link
Author

taw commented Feb 8, 2021

The one for video makes a lot more sense than one for audio, since it at least works, but I'd recommend removing it as well, as absolutely overwhelming majority of video content available has no subtitles and will never have any.

Svelte tutorial having invalid fake <track kind="captions"> for video just to make this rule shut up just proves this point.

<!-- svelte-ignore a11y-media-has-caption --> is not much of a solution, as most devs will have no idea it's even a thing, and the warning message doesn't mention that option.

@happycollision
Copy link
Contributor

happycollision commented Mar 1, 2021

As a side note, I don't read the warning as suggesting you add an empty <track kind="caption"> -- it's implied that you add a src.

Only to someone familiar enough with the track tag to begin with. Just a couple days ago, I created #6034 which quotes a developer who broke his app by including <track kind="caption"> exactly.

FWIW, I like the solution proposed in this issue better than the proposed solution in mine.

@rchrdnsh
Copy link

rchrdnsh commented Mar 5, 2021

I agree...I followed this direction and put a <track kind="captions"/> in my <audio> tag and the app completely broke in iOS 14.4 Safari on the iPhone 12 Pro...filed a bug report with webkit and was able to confirm that removing it completely made the app work again...and I am one of those people who had no idea that I needed a src file, to be honest...it was just something I did to make the warning go away...I get wanting to add this to a video with dialog and visual cues, etc...but don't see the value for tracks, especially instrumentals...I could, of course, be mistaken, as I don't know too much about a11y in general, and am very much willing to learn...but...yeah...seems not super useful for instrumental audio.

@geoffrich
Copy link
Member

geoffrich commented Mar 6, 2021

I opened a PR to remove the warning for audio elements since it's causing the most issues and browsers don't support it. I made sure to note in the PR that it doesn't completely resolve this issue, since there's still some discussion around removing the warning for video elements as well.

@stale
Copy link

stale bot commented Jun 26, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 26, 2021
@stale stale bot removed the stale-bot label Jun 27, 2021
@lingster
Copy link

lingster commented Oct 11, 2021

just to chime in here, we are building a custom video conferencing app using AWS chime and svelte. We get this warning when we are using the <video> tag as this is required for the AWS chime to inject the video stream. As the stream is live, there won't be any captions/subtitles.
<!-- svelte-ignore a11y-media-has-caption --> was added to suppress the warning albeit not optimal.

@aradalvand
Copy link
Contributor

aradalvand commented Oct 31, 2021

More often than not this warning isn't helpful at all. There are numerous reasons why captions wouldn't make sense + some libraries like hls.js set captions dynamically via videoElement.textTracks after parsing the HLS manifest, so there's no <track> tag in the markup.

Even in one of the official tutorials there's a dummy <track> just to silent this warning. Shows how annoying and unhelpful it is most of the time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants