展示广告无障碍要求

Question

我正在为非 Google 展示广告添加 WCAG 可访问性。我使用补间到 0,0 的透明 PNG 来制作广告，以制作广告和制作广告并显示 focus/hover 状态。我们在广告中的文字是 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 and Disability Studies Quarterly 作为上述内容的参考，但我无法找到及时或更好的资源。

Answer 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）。

展示广告无障碍要求

Display ads accessibility requirements

html

accessibility

ads

wai-aria