第 3 方内容图像没有 alt 属性并且符合 WCAG 2.0 A 级 - javascript 解决方案？答案

【问题标题】：3rd party content images don't have alt attributes and meeting WCAG 2.0 Level A - javascript solution?第 3 方内容图像没有 alt 属性并且符合 WCAG 2.0 A 级 - javascript 解决方案？
【发布时间】：2014-02-11 15:19:26
【问题描述】：

我们的某个网站中有一些第 3 方内容需要遵守 WCAG 2.0 A 级要求。通过 RSS 提要传入的 html 没有为 img 标签提供正确的 alt 属性。我们希望使用 javascript 添加 alt 属性。虽然如果关闭 javascript 并不会使代码变得更好，但它会好很多。

这个话题 WCAG 2.0 level A and AJAX generated content 似乎暗示在 WCAG 2.0 Level A 中使用其他 js 方法不是问题。我认为在这个例子中就可以了。

【问题讨论】：

您将如何以编程方式确定合适的替代文本？

标签： javascript accessibility alt wcag2.0

【解决方案1】：

除非您以违反 WCAG 准则的方式使用 javascript，否则使用 javascript 不会影响 WCAG 合规性。作为屏幕阅读器用户，虽然这在技术上符合指南，但您将如何确保 alt 标签具有实际意义？我宁愿没有 alt 标签，也不愿有误导性的标签。

【讨论】：

来源证明！ @jared 非常棒的输入！我知道你只是投入了两分钱，我仍然为你鼓掌。太棒了！

【解决方案2】：

您的假设是正确的，正如 @Jared 所说，JavaScript 本身并没有破坏 WCAG 合规性，除非以破坏可访问性的方式使用。

我也是一个屏幕阅读器用户，讨厌它阅读冗长的尴尬文件名而不是正确或空的替代文本。

如果您找不到合适的alt 文本，您应该插入一个空的alt 属性(alt="")，这样屏幕阅读就不会聚焦/读取图像。就我个人而言，我注意到一些屏幕阅读器会专注并阅读空的alt，所以我使用 ARIA 属性 `aria-hidden="true" 以便浏览器不会通过 Accessibility API 发送图像。

这是一个 jQuery 示例，它检测所有没有 alt 属性的图像并插入一个空图像。

$('img:not([alt])').each(function() {
  $(this).attr('alt', '');
  $(this).attr('aria-hidden', 'true');
});

【讨论】：