Embeddable player fails Accessibility Insights Audit

tomkiss commented 2 years ago

I hope this is the correct place to post this bug report, with no other obvious repository for it, and as the embedded player makes use of api.soundcloud.com, I thought perhaps it might be. If it's not, please advise and I will happily post elsewhere.

Title: Embeddable player fails Accessibility Insights Audit

Issue found of: May 24th 2022

Endpoint(s):

An iframe loading a given embedded player, e.g: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/982691227&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true

Scope(s):

None

Steps to reproduce:

Get the embedded player markup for a given Soundcloud track
Embed it in a webpage and test using Accessibility Insights (Chrome extension)

Expected behaviour:

In order to ensure accessibility compliance there should not be any accessibility errors reported. Accessibility Insights' Fast Pass feature is a useful tool for accessing compliance.

Actual behaviour:

There are multiple accessibility issues, including some simple changes to markup that would be easily to implement. You can see an example of the report generated here.

I hope this is report helpful. 🙌

quicksketch commented 9 months ago

Thanks for filing this issue, I got here through Google. My accessibility checker too (Dubbot) flags all pages with SoundCloud embeds with multiple accessibility issues, from missing ARIA attributes, to incorrectly used ARIA attributes, and missing the title attribute on the <iframe> element. Seems like all of these issues would be fairly easy to address.

youssefhassan commented 1 month ago

@tomkiss @quicksketch thanks for reporting this, is this a valid point to work on?

quicksketch commented 1 month ago

@youssefhassan Yes, that would be great if this could be improved. Here's a sample player that demonstrates the problems:

https://emergency.appstate.edu/media/emergency-management-podcast-ep-05-severe-weather

There are issues both with the iframe's contents and on the iframe itself. The iframe itself could have a pretty simple fix. Right now it prints something like this:

<iframe class="embed-responsive-item" style="width: 100%;" height="166" src="https://w.soundcloud.com/player/?url=...">

It just needs to have a title attribute added, preferably with the label of the audio being rendered. Something like this:

<iframe title="Soundcloud audio player: The title of my podcast episode" class="embed-responsive-item" style="width: 100%;" height="166" src="https://w.soundcloud.com/player/?url=...">

But if that is not possible to customize it per piece of content, having a title like Soundcloud audio player would be a step up from nothing and pass automated scans.

For the contents of the iframe, I would recommend running an accessibility checker like @tomkiss suggested. I took the URL from the iframe and visited that directly, then ran the scan. For example this URL: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/614316357&color=FFC900&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&sharing=false&buying=false&download=false&visual=false

Had 6 accessibility issues flagged immediately:

soundcloud / api