I'm working on creating a client's website in making it accessible. We're pulling in video from an iFrame with YouTube videos. The videos work fine, updated the Closed Captioning, etc. However the aria-label displaying on the YouTube Channel logo is displaying as "Photo image of " which doesn't meet accessibility guidelines.
<a class="ytp-title-channel-logo" target="_blank" data-visual-id="2" href="https://www.youtube.com/channel/lettersandsuch" aria-label="Photo image of " style="background-image: url("https://filepathforphoto.png");"></a>
Since it's in an iFrame I don't know if we can actually grab and change the iFrame with JS. I've tried messing around in the YouTube account changing the logo and updating the channel name but it's not hitting the aria-label.
I tried changing it with jQuery but I don't think I'm doing it right. I put an id on the iFrame and applied this:
$(document).ready(function(){
var iFrameDOM = $("iframe#frameID").contents();
iFrameDOM.find('.ytp-title-channel-logo').attr('aria-role', 'something');
})
It's not showing any errors locally but not applying the code change. Is there a way to change the aria-label on the YouTube Channel Logo?
from Updating YouTube Channel Logo's Aria-Label
No comments:
Post a Comment