展示广告无障碍要求答案

【问题标题】：Display ads accessibility requirements展示广告无障碍要求
【发布时间】：2021-05-26 05:12:41
【问题描述】：

我正在为非 Google 展示广告添加 WCAG 辅助功能。我使用补间到 0,0 的透明 PNG 制作广告，以动画和构建广告并显示焦点/悬停状态。我们在广告中的文字是 PNG 的一部分。我的简化代码如下：

    <!DOCTYPE html>
    <html>
    <head>
        <meta content="width=300,height=250" name="ad.size">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
        <title>300x250</title>
        <link href="300x250.css" rel="stylesheet" type="text/css">
        <script defer src="https://url.com/script-that-animates-images/" type="text/javascript"></script>
    </head>
    <body>
        <div id="container">
            <a href="https://url.com" title="Advertisement — Text that repeats the image's text. Call to action." id="rolloverCatch">
                <div id="content">
                    <!-- animated images that include the text -->
                    <img src="https://www.fillmurray.com/300/250">
                </div>
            </a>
        </div>
    </body>
    </html>

我已将title 添加到锚点——悬停时重复图像文本——但这是否正确且足够？（例如，alt 用于图像，title 用于链接，这是正确的吗？）我意识到理想的情况是呈现纯文本，但是可以做更多的事情来更好地满足可访问性要求，只使用显示中的图像广告？在图像本身上，我应该添加aria-hidden=true 吗？这里有合适的参考吗？

关于 Google 展示广告，是否在该系统中添加了无障碍功能？我正在跟踪我没有在上传的 HTML 源中包含锚点，Google 展示广告是否应该在最顶部的图片上添加 alt 文字？

我使用accessibleweb.com 和Disability Studies Quarterly 作为上述参考，但我无法找到及时或更好的资源。

【问题讨论】：

标签： html accessibility ads wai-aria

【解决方案1】：

我认为在您的示例中，最自然的方法是将alt 属性添加到<img> 元素：

<div id="container">
    <a href="https://url.com" id="rolloverCatch">
        <div id="content">
            <!-- animated images that include the text -->
            <img src="https://www.fillmurray.com/300/250" alt="Advertisement — Text that repeats the image's text. Call to action.">
        </div>
    </a>
</div>

当<a> 元素有一个文本，或者另一个元素在其开始和结束标记之间有一个可访问的名称时，它会将其作为自己的可访问名称。

顺便说一句，所有有意义的图片都必须有替代文字（alt、aria-label 或 aria-albelledby）。

【讨论】：

根据w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H30.html ：“当图像是链接的唯一内容时，图像的替代文本描述了链接的独特功能。”示例 2 最相似：<a href="routes.html"><img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /></a> 不需要标题。将给其他图层aria-hidden="true" 并遵循单个图像的替代文本。谢谢！