Gian brings up an interesting point, Instead of using a background image, insert the image that represents an open window instead. Place text in the alt attribute that specifies the window will open in a new window.
I think I can go one step better. The image you are using is still presentational and not necessarily functional. How about <a href="http://www.yahoo.com " class="external" title="This link will open in a new window" onclick="window.open(this.href); return false;" >Yahoo.com<span>This link will open in a new window</span></a> Now, use CSS .external {background: url(bg-external-link.png)no-repeat 0 0; padding-left:25px;} .external span {display:none;} This gives you the visual image without requiring multiple server requests, distinct language for screenreaders, and provides clear information for those without CSS enabled. Will a screen reader read something that has display:none? Does someone have a better suggestion for hiding this? I'm worried that text-indent would create a huge target area for the link and position absolute may get thrown off by where the link is used. We could use javascript to detect the external link, i.e. look for href="http" or more likely a series of detects. It could insert the class, the title, and the span. This makes it easier on the programmer, they would write: <a href="http://www.yahoo.com";>Yahoo.com</a> Thierry wrote a script for the latest post on my web site: www.tdrake.net. You could use this as the starting point for the above javascript and just modify it for what it is looking for and needs to insert. P.S. I can't figure out why this post is behaving differently than others on my blog. I know it looks horrible as a permalink. There is an extra </div> getting inserted and it is using a different comments include. Has anyone else had this issue on Wordpress? -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gian Sampson-Wild (PurpleTop) Sent: Thursday, September 01, 2005 1:13 AM To: [email protected] Subject: RE: [WSG] I'm on a question roll.... background images on links Hi Ted Just so you are aware, background images are not read by screen readers so if you are trying to make the site accessible you should ensure that there is an alternate way of identifying the link as opening a new window. (Informing the user of opening a new window is a Level AA issue but if you provide an image that conveys that information it becomes a Level A issue). Also you can't rely on the TITLE attribute of the link tag as they are not read out by screen readers by default. You may want to consider something like: http://www.liveinvictoria.vic.gov.au/ViewPage.action?siteNodeId=95&languageI d=1&contentId=-1 (right hand column under "More information") Cheers, Gian -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Drake, Ted C. Sent: Tuesday, 16 August 2005 2:32 AM To: '[email protected]' Subject: [WSG] I'm on a question roll.... background images on links We are using a background image on links to signify they are external. The image sits on the right side of the link using background: url() 100% 0; All is fine in firefox, but in IE the icon overlaps or sits at the top when the text wraps to a second line. Is there a way to make the background image follow the text inside a link rather than looking at the link as a block? I've tried display: inline-block and that made the spacing better, but didn't fix the issue. Here's an example Good link: | Google Virtual | | World (icon) | Bad link: | Google Virtua(icon) | The icon sits at the top and doesn't | World | flow with the text Has anyone found a way to fix this? I don't want to go back to inline images and our standard is to have the icon on the right and not the left. Otherwise, I would have placed it on the left and it would have been a cake-walk. P.S. sorry about an earlier html formatted email, I try to send them in plain text. Thanks Ted Drake www.tdrake.net ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
