W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2013

Use of sprite images that conform to WCAG 2.0 1.1.1guideline

From: Thomas Birch <thomas_birch@ieci.es>
Date: Mon, 23 Sep 2013 10:48:35 +0200
To: w3c-wai-ig@w3.org
Message-ID: <OFE97CD1B1.6462CA83-ONC1257BEF.002FF322-C1257BEF.00306509@ieci.es>
Hi,

We are testing a web site's accessibility and have a question regarding 
WCAG 2.0 level A guideline 1.1.1 and some of the techniques to meet this 
guideline, such as "G82: Providing a text alternative that identifies the 
purpose of the non-text content".

Some of the pages we are validating use sprite images (
http://www.w3schools.com/css/css_image_sprites.asp) as CSS background 
images on certain elements (e.g. span). This type of images doesn't have 
an ALT attribute or similar, so a descriptive text has been added to the 
element and has been hidden with CSS.

For example, this technique has been used for the controls in an image 
carousel:

Sprite image:



How it's actually used in the image carousel:



Lastly, this is the source code, where it can be observed that the images 
have been set as background images with CSS and have no alt or title 
attribute, but have a descriptive CSS hidden text within a span element:

        <ul class="carousel-nav">
        <li class="pag-dots-btn-prev pag-dots-btn-disabled">
                <a href="#"><span>Previous</span></a>
        </li>
        <li class="pag-dots-btn-active">
                <a href="#"><span>1</span></a>
        </li>
        <li>
                <a href="#"><span>2</span></a>
        </li>
        <li>
                <a href="#"><span>3</span></a>
        </li>
        <li class="pag-dots-btn-next">
                <a href="#"><span>Next</span></a>
        </li>
</ul>

When a page's images are disabled, these sprite images disappear without 
showing the hidden text in the visual browser.

Would this technique be sufficient for these particular images and WCAG 
guideline, if screen readers can access the hidden text, or is it required 
for the text to be visible when images have been disabled?

Thank you very much for your time. Regards,

Este mensaje, y en su caso, cualquier fichero anexo al mismo, puede
contener información confidencial, siendo para uso exclusivo del 
destinatario, quedando prohibida su divulgación copia o  distribución a 
terceros sin la autorización expresa del remitente. Si Vd. ha recibido 
este mensaje erróneamente, se ruega lo  notifique al remitente y 
proceda a su borrado.
Gracias por su colaboración.

This message (including any attachments) may contain confidential 
information. It is intended for use by the recipient only. Any 
dissemination, copying or distribution to third parties without the 
express consent of the sender is strictly prohibited. If you have 
received this message in error, please delete it immediately and 
notify the sender. 
Thank you for your collaboration.


picture
(image/gif attachment: 01-part)

picture
(image/gif attachment: 02-part)

picture
(image/gif attachment: 03-part)

Received on Monday, 23 September 2013 08:49:06 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:49 UTC