WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: graphic and link problem

for

From: Sarah Pulis
Date: Sep 13, 2012 8:34PM

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.