ARTICLE AD BOX
I use axeCore plugin to check the accesibility of a website. It seems YouTube embedded videos have started showing a couple of errors resulting in a much lower "accessibility score". These are the two we've come across but there may be others.
The message from axeCore is:
-----
Ensure ARIA attributes are not prohibited for an element's role
Element Location:
iframe[width="560"] #movie_player <div class="html5-video-player ytp-hide-controls ytp-exp-bottom-control-flexbox ytp-modern-caption ytp-livebadge-color unstarted-mode ytp-large-width-mode" tabindex="" id="movie_player" data-version="/s/player/8e54e4ea/player_embed_es6.vflset/en_US/base.js" aria-label="YouTube Video Player">To solve this problem, you need to fix the following:
aria-label attribute cannot be used on a div with no valid role attribute.
-----
Ensure buttons have discernible text
Element Location:
iframe[width="560"] .ytmVideoInfoChannelAvatar <button class="ytmVideoInfoLink ytmVideoInfoChannelAvatar"><img alt="thumbnail-image" class="ytCoreImageHost ytmVideoInfoChannelLogo ytCoreImageFillParentHeight ytCoreImageFillParentWidth ytCoreImageContentModeScaleAspectFill"></button>To solve this problem, you need to fix at least (1) of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"
-----
The first one (aria-label and role on div) looks like a correct fail but I can't figure out anything we can do as CORS blocks changing the content.
In the second one (discernible text), the img inside the button has alt text (although it's generic) so I'm not sure if this is a false positive. If I read the axeCore description of that criteria, it says. dequeuniversity.com/rules/axe/4.2/link-name "Link text and alternate text for images, when used as links, must be discernible by a screen reader, must not have a duplicate label, and must be focusable."
Is there a way solve this issues, or another way to improve the score on Axe Core for Youtube embedded videos?
To replicate the issue:
Embed any YouTube video using the following code, substituting the video code and video title to match your example:
<iframe referrerpolicy="strict-origin-when-cross-origin" width="560" height="315" src="https://www.youtube-nocookie.com/embed/YOUR_VID_CODE_HERE" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen aria-label="VIDEO TITLE HERE"></iframe>Install Axe Dev browser plugin (Chrome, Firefox, Edge): https://www.deque.com/axe/devtools/extension/
Then F12 to bring up the dev tools window in the browser, navigate to the Axe Dev tab in the top nav area, and do a full scan of the page with the YouTube video.
Thanks in advance
