Search code examples
htmlaccessibilityadswai-aria

Display ads accessibility requirements


I'm adding WCAG accessibility to non-Google display ads. I produce ads using transparent PNGs that tween to 0,0 to animate and build the ad and to show the focus/hover state. Our text in the ad is part of the PNGs. My simplified code below is:

    <!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>

I've added title to the anchor — on hover the image text is repeated — but is that correct and enough? (e.g., alt is for images, title for links, is this correct?) I realize the ideal situation would be to render plain text but what more can be done to better align with accessibility requirements using only images in a display ad? On the images themselves, should I be adding aria-hidden=true? Is there an appropriate reference to use here?

Concerning Google display ads, is the accessibility functions added within that system? I'm tracking I do not have anchors within the uploaded HTML source, should Google display ads have alt text on the top-most image instead?

I'm using accessibleweb.com and Disability Studies Quarterly as references for the above but I'm having trouble finding timely or better resources.


Solution

  • I think in your example the most natural way to do it is to add an alt attribute to the <img> element:

    <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>
    

    When the <a> element has a text, or another element having itself an accessible name between its opening and closing tags, it takes that as its own accessible name.

    And by the way, all the images that have something meaningful must have an alternative text (with alt, aria-label or aria-albelledby).