What I came up with a while ago for a button was this: <a href=""> <img src="" height="1px" width="1px" alt="Text for screen readers" /> </a> Set your button image on the anchor using CSS and leave a few pixels of solid colour around the image. Make the spacer img inside the same colour as the solid colour so when it overlaps the edge of the anchor it cant be seen. Images switched off / screen readers will still be able to read the img alt text. Best of all you can use CSS still for the hover effect so no javascript either. That could work well on your social media buttons ;) Semantic? No. Accessible - Yes. Regards, Darren Lovelock Munky Online Web Design <http://www.munkyonline.co.uk/> http://www.munkyonline.co.uk T: +44 (0)20-8816-8893
_____ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Mitch Malone Sent: 15 April 2009 02:38 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Image Replacement and Accessabilty Hmmm... If they had images off, no. CSS off, yes. Touché! - M On 15/04/2009, at 11:31 AM, Darren Lovelock wrote: Thats not really accessible is it? Visitors with images switched off wont be able to see anything. Regards, Darren Lovelock Munky Online Web Design <http://www.munkyonline.co.uk/> http://www.munkyonline.co.uk T: +44 (0)20-8816-8893 _____ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Mitch Malone Sent: 15 April 2009 02:04 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Image Replacement and Accessabilty This is what I would recommend... HTML: <hX class="hideme"><a href="#" title="This is the link title">This is the link text</a></h1> CSS: hX.hideme { text-indent: -9999px; background: url("linktofile.png"); height: XXpx; // This should match the a element width: XXpx; // This should match the a element } hX.hideme a:link, hX.hideme a:visited, hX.hideme a:hover, hX.hideme a:active, { display: block; height: XXpx; // This should match the hX element width: XXpx; // This should match the hX element } Working examples of this are actually at my website: http://www.mitchmalone.name/ where the social media icons are. All icons are replaced using a spriting technique which enables tooltips etc. but removes text. Please ignore the rest of the site as it is a work in progress. Hope this helps! - M On 15/04/2009, at 10:39 AM, Christopher Kennon wrote: Hi All, The text indent CSS property can render an h# element inaccessible to screen readers. Other than using an img element and alt attribute, what image replacement techniques are also accessible? h#{ text-indent: -9999px; } Chris ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
