Re: Use of sprite images that conform to WCAG 2.0 1.1.1guideline

Hi Thomas, 

Re:Would this technique be sufficient for these particular images and WCAG guideline, if screen readers can access the hidden text, 
I think it depends on how did you hide the text. Check  C7: Using CSS to hide a portion of the link text 
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7


Rabab
>>> Thomas Birch <thomas_birch@ieci.es> 2013-09-23 4:48 AM >>>


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.