E-mail List Archives
Thread: graphic and link problem
Number of posts in this thread: 4 (In chronological order)
From: David Farough
Date: Wed, Sep 12 2012 11:55AM
Subject: graphic and link problem
No previous message | Next message →
We have a web application, where the main menu page consists of a list
containing several entries. within each entry there is a graphic which
is either a checkmark or a red x, followed by the name of the section of
the application. Ultimately It would be good to have the meaning of the
graphic included with the link so that tabbing to the link would
indicate to a screenreader user whether the section of the app addressed
by the link was properly completed or not. I'm guessing that the best
way to do this without including the graphic meaning on screen would be
to hide it off screen.
Can someone point me to an example of how this could be done?
David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779
From: Patrick H. Lauke
Date: Wed, Sep 12 2012 5:01PM
Subject: Re: graphic and link problem
← Previous message | Next message →
On 12/09/2012 18:55, David Farough wrote:
> We have a web application, where the main menu page consists of a list
> containing several entries. within each entry there is a graphic which
> is either a checkmark or a red x, followed by the name of the section of
> the application. Ultimately It would be good to have the meaning of the
> graphic included with the link so that tabbing to the link would
> indicate to a screenreader user whether the section of the app addressed
> by the link was properly completed or not. I'm guessing that the best
> way to do this without including the graphic meaning on screen would be
> to hide it off screen.
>
> Can someone point me to an example of how this could be done?
So what IS the meaning of a checkmark or a red cross? Is it like a todo
application, where it's "done" and "not done/rejected"? "completed" "not
completed"? Answer that, and you've got your meaning.
How to then include it? Depends how you're including the graphics.
Simplest, of course
<img src="check.png" alt="Completed"> ...
<img src="cross.png" alt="Not completed"> ...
P
--
Patrick H. Lauke
From: Patrick H. Lauke
Date: Wed, Sep 12 2012 5:02PM
Subject: Re: graphic and link problem
← Previous message | Next message →
On 13/09/2012 00:01, Patrick H. Lauke wrote:
> So what IS the meaning of a checkmark or a red cross? Is it like a todo
> application, where it's "done" and "not done/rejected"? "completed" "not
> completed"? Answer that, and you've got your meaning.
And it seems I'm a moron for just skim-reading your email, as you're
answering it already in your question. Don't mind me... ;)
P
--
Patrick H. Lauke
From: Sarah Pulis
Date: Thu, Sep 13 2012 8:34PM
Subject: Re: graphic and link problem
← Previous message | No next message
Hi David,
Given that you are combining an icon and a link, I'd suggest following code example 2 in H2: Combining adjacent image and text links for the same resource [1]. The important things is to include the image within the link and include an appropriate text alternative for the image as suggested by Patrick. That way the text alternative and link text will be announced together by a screen reader.
So, a code sample for your scenario may be:
<a href="sectionx.htm">
<img src="checkmark.gif" alt="completed"/>
Section X
</a>
[1] http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H2
Sarah Pulis
Web Accessibility Evangelist – Access iQ
T: 02 8218 9320 | F: 02 9212 6289
Level 3, 616 – 620 Harris St, Ultimo NSW 2007
Access iQ is an initiative of Media Access Australia.
Follow us (@AccessiQ) on Twitter, follow me (@sarahtp) on Twitter and like us on Facebook.