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

Hi thomas,

this may be helpful:
http://blog.paciellogroup.com/2012/08/notes-on-accessible-css-image-sprites/

--

Regards

SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>


On 23 September 2013 09:48, Thomas Birch <thomas_birch@ieci.es> wrote:

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