时间戳

首页 > 解决方案 > 展示广告无障碍要求

html - 展示广告无障碍要求

问题描述

我正在为非 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 源中没有alt锚点，Google 展示广告是否应该在最顶部的图片上添加文字？

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

标签： htmlaccessibilityadswai-aria

解决方案

我认为在您的示例中，最自然的方法是向元素添加一个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）。

推荐阅读