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=95languageI d=1contentId=-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: 'wsg@webstandardsgroup.org' 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 **
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.comspanThis 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: wsg@webstandardsgroup.org
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=95languageI
d=1contentId=-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: 'wsg@webstandardsgroup.org'
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
**
RE: More accessibility on opening new windows: was:RE: [WSG] I'm on a question roll.... background images on links
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: 'wsg@webstandardsgroup.org'
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.comspanThis 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: wsg@webstandardsgroup.org
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=95languageI
d=1contentId=-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: 'wsg@webstandardsgroup.org'
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
Re: [WSG] I'm on a question roll.... background images on links
Floating the link left as well as display:block should make the image sit at the end of the text, as opposed to spaning the width of the page. This can cause problems in a few older browsers such as Netscape 6, as once you float something left it is no longer a block element. Hope that makes sense. - Original Message - From: Drake, Ted C. To: 'wsg@webstandardsgroup.org' Sent: Monday, August 15, 2005 5:32 PM 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. Theimage 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 whenthe text wraps to a second line. Is there a way to make the backgroundimage follow the text inside a link rather than looking at the link as ablock?I've tried display: inline-block and that made the spacing better, butdidn't fix the issue.Here's an exampleGood link: | Google Virtual || World (icon) |Bad link:| Google Virtua(icon) | The icon sits at the top and doesn't | World | flow with the textHas anyone found a way to fix this? I don't want to go back to inline imagesand 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 acake-walk.P.S. sorry about an earlier html formatted email, I try to send them inplain text.ThanksTed Drakewww.tdrake.net **The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
RE: [WSG] I'm on a question roll.... background images on links
Hi Paul I should have mentioned that the link normally appears within paragraphs of text. It will sometimes appear as a link inside a list. Floating is an interesting option for other applications. Thanks Ted - Floating the link left as well as display:block should make the image sit at the end of the text, as opposed to spaning the width of the page. This can cause problems in a few older browsers such as Netscape 6, as once you float something left it is no longer a block element. Hope that makes sense. --- 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 **
