Question

我正在努力创建可访问的客户网站。我们正在从iFrame中提取带有YouTube视频的视频。视频可以正常工作，更新了隐藏式字幕等。但是，YouTube频道徽标上显示的咏叹调标签显示为“的图片图像”，不符合辅助功能准则。

<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(&quot;https://filepathforphoto.png&quot;);"></a>

由于它位于iFrame中，所以我不知道我们是否真的可以使用JS来获取和更改iFrame。我曾尝试在YouTube帐户中搞乱更改徽标和更新频道名称的方法，但是没有触及aria标签。

我尝试使用jQuery进行更改，但我认为我做的不正确。我在iFrame上放置了一个ID并应用了它：

$(document).ready(function(){
 var iFrameDOM = $("iframe#frameID").contents();
 iFrameDOM.find('.ytp-title-channel-logo').attr('aria-role', 'something');
})

它不会在本地显示任何错误，但不会应用代码更改。是否可以更改YouTube频道徽标上的aria标签？

Answer 1

由于Same origin policy，您无法更改跨域iframe的DOM，即，Web浏览器允许第一个网页中包含的脚本访问第二个网页中的数据，但前提是两个网页的来源相同。 JavaScript不能读取跨站点内容。这样做是为了防止出现称为Cross-site scripting (XSS)的安全漏洞。

YouTube player parameter中没有针对此的选项，但我认为您可以通过IFrame Player API

来解决。

Answer 2

@Kiran的答案的补充；最简单的方法是编写浏览器扩展。您将能够做任何您想做的事。如果它是Chrome扩展名，则只需在您的manifest.json文件中寻求许可。

这是一堆示例扩展项目：

https://github.com/orbitbot/chrome-extensions-examples

使用扩展程序，您可以在任何网站中注入任何javascript代码。

更新YouTube频道徽标的Aria-Label

2 个答案: