Sorry Ted two things:
1. No JavaScript will cause no new window to open AND the title will still be
there.
2. Display:none on the span helps no one. Screen readers only ignore
display:none on form controls.
It would be better to write the whole thing as a JavaScript routine, complete
with noscript section:
<script>
write link with new window clause
</script>
<noscript>
Normal link
</noscript>
Regards
Mike 2k:)2
____________________________________________________________________________________
Mike Foskett
Web Standards, Accessibility & Testing Consultant
Communications
British Educational Communications and Technology Agency (Becta)
Milburn Hill Road, Science Park, Coventry CV4 7JJ
Email: [EMAIL PROTECTED]
Tel: 02476 416994 Ext 3342 [Tuesday - Thursday]
Fax: 02476 411410
http://www.becta.org.uk
____________________________________________________________________________________
-----Original Message-----
From: Drake, Ted C. [mailto:[EMAIL PROTECTED]
Sent: 01 September 2005 16:19
To: '[email protected]'
Subject: More accessibility on opening new windows: was:RE: [WSG] I'm on a
question roll.... background images on links
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
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
