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

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

From: Steve Faulkner <faulkner.steve@gmail.com>
Date: Mon, 23 Sep 2013 10:08:53 +0100
Message-ID: <CA+ri+V=ZqW9fy-UpuQmPCgcHMgJrFpTQCvxbvrqN5X0wnPFQMg@mail.gmail.com>
To: Thomas Birch <thomas_birch@ieci.es>
Cc: WAI Interest Group <w3c-wai-ig@w3.org>
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.
>


picture
(image/gif attachment: 01-part)

picture
(image/gif attachment: 02-part)

picture
(image/gif attachment: 03-part)

Received on Monday, 23 September 2013 09:10:04 UTC

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