15 replies [Last post]
loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 11 years 4 days ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Hi

I know opening a link in a new window is an accessibility naughty but it has been decided on a site I am working on to do this for external links.

It has also been decided to keep the DOCTYPE as strict so we are using a little bit of Java to open these rather than the depreciated “_blank” attribute.

What I’d like to know is what is the best way of letting a user know that that this is going to happen – especially if there is no room to put a “opens in new window” in the actual link.

Should I just put this into the title of the link? I am sure I read somewhere that screen reading devices do not always read this. I have made an icon for links where this happens and have made this part of the link which helps sighted people (once they know what the icon means) but this doesn’t really help.

Also, what is considered the best way to actually open these new windows? I know there is a way of having a specific DOCTYPE to allow the “_blank” attribute but reading through comments this seems to cause it’s own problems.

Any help always appreciated.

Tags:
HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 30 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Accessibility – Opening in New Window.

Hi

How about this: http://www.accessify.com/tutorials/the-perfect-pop-up.asp

Not sure there is an answer to this that meets all your requirements - it'd be a lot easier to either dump the new window idea or dump the strict dtd idea...

My understanding is that screenreaders are not set by default to read title attributes - but that users can change this so that they do. I stand to be corrected on this one.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 11 years 4 days ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Accessibility – Opening in New Window.

thanks for that.

I'd still like to know what the recomendations are for letting the user know.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Accessibility – Opening in New Window.

I've seen this site ( http://www.accessify.com/tutorials/the-perfect-pop-up.asp ) mentioned in other threads, and it appears to me to be overkill. The idea of using an icon to indicate when you want to open a new window is a good one if you can't spell it out. While the user will learn from experience what the icon means, it is still a good idea to explain it somewhere—preferably where it is easily noticed. The css is simple, too;

  
a[href^="http://"] {  
    padding-right: 20px;  
    background: url(offsite.png) top right no-repeat;  
    }
The attribute selector is saying 'if the href begins with … If you must support obsolete browsers, use a class as the selector and include the class as a link attribute.

To create the new window, use the onclick event handler. Be sure to allow for graceful failure, like so;
  
<a href="http://www.some.com/other.html"  
   onclick="return !window.open(this.href);">another place</a>
This causes javascript to open a new window with the url value in href. The return value is the inverse of the result. In other words, we test for success.[1] If the new window opens, the return value is true negated. onclick=false ∴ never happened and html link doesn't fire. If javascript fails to open the window, false negated is returned. onclick=true ∴ click, and the html link fires opening the url in the present window. If javascript is not there or is disabled, the link acts as is normal.

That's my suggestion.

cheers,

gary

[1] The more usual method of onclick="window.open(this.href); return false;" has a problem if javascript fails to open a new window. The hard-coded false is returned and the new page does not open at all, a Bad Thing.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 11 years 4 days ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Accessibility – Opening in New Window.

thanks for this...

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Accessibility – Opening in New Window.

kk5st wrote:
The idea of using an icon to indicate when you want to open a new window is a good one if you can't spell it out.

The problem here is that one of the groups who find pop ups most disorientating are screen reader users. If you rely on an icon to show newwindowness it's not going to help them much at all.

Spell it out on each links title and if possible in the actual link text as well if you want to forewarn all users of the impending horror of a new window.

Although I'll admit getting a clinet to agree to such a thing is next to impossible alas Crying

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 11 years 4 days ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Accessibility – Opening in New Window.

Been asking around / reading up on this and I am trying to gauge people opinions about this.

We are going to have the doc-type as strict and we are having external links opening in new windows.

Basically accessibility speaking I know this is not a good idea as it confuses screen readers. If this has to happen we should warn the user.

The best way to warn someone would be to have “(opens in new window)” inside the actual link text. However, most of the time there is not enough room to do this.

Ideally then we could use the title attribute but apparently some screen readers don’t use this and it can’t be relied on. Maybe then the best way would be to put an Icon in the xhtml whenever a link is going to be opened in a new window with an alt tag of “(opens in new window)”.

Should we still use the title “(opens in new window)” in the link text? Just thinking whether this might be useful for those screen readers that do understand the title attribute or whether if the alt attribute in the icon would be enough.

Something else I have found out is that googlebot does not like Javascript opening like this s < a href=”Javascript:”… or <a href=”#” onclick=”etc”. In this case some DOM scripting should be using rel=”external” like http://www.tcervo.com/index.php?p=18.

This brings me onto the next point - what if javascript is disabled? I suppose as long as the link still opens then this is OK but what then of our icon? This would be redundant. Maybe we should check that javascript is enabled before showing this.

Hmmmm maybe I’ll just have to try and convince boss / clients that new windows really are bad! Any tips!?

All help / comments appreciated!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Accessibility – Opening in New Window.

I think we may not know enough about the behaviour of screen readers. Perhaps they can be set by users to open all links in the same "window" regardless. Has anyone done research on this?

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 26 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Accessibility – Opening in New Window.

This is my feeble attempt at a completely-CSS solution.

Mr. Angeletti at http//www.search-this.com/website_design/css_rollover_buttons.aspx
claims a great many advantages to using the "Trifecta" CSS Button Rollover approach.

At the same time, Mr. Nichols has some good ideas at http//www.webreference.com/programming/image_map/

So I played at combining these and came-up with a fun solution to a page that lacks space but needs to communicate to the end-user that he/she is going to go somewhere else by a link very soon.

I haven't figured-out how to show two images in a post yet, so here's the first-one that shows the static view of the page. Then, the next post will have another to illustrate a dynamic css solution.

The code can be found (only temporarily) at http//beta-154104.server1.dotnetsandbox.net/Link%20Opens%20New%20Window.aspx and looks like this at the moment

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http//www.w3.org/1999/xhtml" >
<head>
<title>Link Opens New Window</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<style type="text/css">

html, body { font-family tahoma; arial, sans-serif;
margin 0;
padding 0;
text-align center;
}
.cssnav {
position relative;
font-family arial, helvetica, sans-serif;
background-image url(Left-Click Opens New Window.gif);
background-repeat no-repeat;
white-space nowrap;
display block;
width 152px;
height 18px;
margin 0;
padding 0;
}

.cssnav a {
display block;
color #000000;
font-size 11px;
width 152px;
height 18px;
display block;
float left;
color black;
text-decoration none;
}

.cssnav img {width 152px; height 18px; border 0; }
* html ahover {visibilityvisible}
.cssnav ahover img{visibilityhidden}

.cssnav span {
position absolute;
left 35px;
top 15px;
margin 0px;
padding 0px;
cursor pointer;
}
.csswindow {
position relative;
font-family arial, helvetica, sans-serif;
background-image url(Left-Click Opens New Window.gif);
background-repeat no-repeat;
white-space nowrap;
display block;
width 152px;
height 18px;
margin 0;
padding 0;
}

.csswindow a {
display block;
color #000000;
font-size 11px;
width 152px;
height 18px;

float left;
color black;
text-decoration none;
}

.csswindow img {width 152px; height 18px; border 0; }
* html ahover {visibilityvisible}
.cssnav ahover img{visibilityhidden}

.csswindow span {
position absolute;
left 35px;
top 15px;
margin 0px;
padding 0px;
}
#csswindow a span, #csswindow avisited span {
displaynone;}

/* set the size of the definition list <dl> and add the background image */
#imap {displayblock; width400px; height240px; backgroundurl(beatles_basic.jpg) no-repeat; positionrelative;}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {displayblock; width400px; height0; padding-top240px; overflowhidden; positionabsolute; left0; top0; backgroundtransparent url(beatles_hover.jpg) no-repeat 400px 400px; cursordefault;}
/* the hack for IE pre IE6 */
* html #imap a#title {height240px; he\ight0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#titlehover {background-position 0 0; z-index10;}

/* place the <dd>s in the correct absolute position */
#imap dd {positionabsolute; padding0; margin0;}
#imap #picp {left36px; top46px; z-index20;}
#imap #picr {left113px; top76px; z-index20;}
#imap #picj {left192px; top50px; z-index20;}
#imap #picg {left262px; top60px; z-index20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#paul, #imap a#ringo, #imap a#john, #imap a#george {displayblock; width85px; height85px; backgroundtransparent url(../images/hover.gif) -100px -100px no-repeat; text-decorationnone; z-index20;}

/* style the span text so that it is not initially displayed */
#imap a span, #imap avisited span {displaynone;}

/* move the link background image to position 0 0 when hovered */
#imap a#paulhover, #imap a#ringohover, #imap a#johnhover, #imap a#georgehover {background-position0 0;}

/* define the common styling for the span text */
#imap ahover span {positionabsolute; width388px; displayblock; font-familyarial; font-size12px; background#fff; color#000; border1px solid #000; padding5px;}
/* the hack for IE pre IE6 */
* html #imap ahover span {width400px; w\idth388px;}

/* move the span text to a common position at the bottom of the image map */
#imap a#paulhover span {left-100px; top-200px;}
#imap a#ringohover span {left-100px; top-210px;}
#imap a#johnhover span {left-100px; top-150px;}
#imap a#georgehover span {left-100px; top-150px;}

/* add the style for the link span text - first line */
#imap a spanfirst-line {font-weightbold; font-styleitalic;}

/* set the size of the definition list <dl> and add the background image */
#nmap {displayblock; width152px; height18px; backgroundurl(Open My Test Page.gif) no-repeat; positionrelative;}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#nmap a#A1 {displayblock; width152px; height0; padding-top18px; overflowhidden; positionabsolute; left0; top0; backgroundtransparent url(Left-Click Opens New Window.gif) no-repeat 152px 18px; cursordefault;}
/* the hack for IE pre IE6 */
* html #nmap a#A1 {height18px; he\ight0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#nmap a#A1hover {background-position 0 0; z-index18;}

/* place the <dd>s in the correct absolute position */
#nmap dd {positionabsolute; padding0; margin0;}
#nmap #dd1 {left0px; top0px; z-index19;}

/* style the <dd><a> links physical size and the background image for the hover */
#nmap a#A2 {displayblock; width152px; height18px; backgroundtransparent url(Left-Click Opens New Window.gif) -100px -100px no-repeat; text-decorationnone; z-index19;}

/* style the span text so that it is not initially displayed */
#nmap a span, #nmap avisited span {displaynone;}

/* move the link background image to position 0 0 when hovered */
#nmap a#A2hover {background-position0 0;}

/* define the common styling for the span text */
#nmap ahover span {positionabsolute; width152px; displayblock; font-familyarial; font-size12px; background#fff; color#000; border1px solid #000; padding5px;}
/* the hack for IE pre IE6 */
* html #nmap ahover span {width152px; w\idth80px;}

/* move the span text to a common position at the bottom of the image map */
#nmap a#A2hover span {left0px; bottom80px;}

</style>
</head>
<body>
<BR />
Mark Angeletti's "Trifecta" CSS Rollover Button at
<BR />
http//www.search-this.com/website_design/css_rollover_buttons.aspx
<BR />
<div class="cssnav">
<a href="http//www.csscreator.com" title="Left-Click Opens CSS Creator in a New Window">
<img src="Open My Test Page.gif" alt="Left-Click Opens CSS Creator in a New Window" />
<span> Open CSS Creator </span> </a> </div>
<BR />
<BR />

<A href="http//www.csscreator.com" target="_blank" >
<IMG src="Open My Test Page.gif" alt="Left-Click To Open CSS Creator in a New Window"
onMouseOver="this.src = 'Left-Click Opens New Window.gif';"
onMouseOut="this.src = 'Open My Test Page.gif';"
onClick="return !window.open(this.href);"
style="border-width0px; clear none;" /></A>
<BR /><BR />
<div class="csswindow">
<a href="http//www.csscreator.com" target="_blank"
onclick="return !window.open(this.href);">
<IMG src="Open My Test Page.gif"
alt="Left-Click Opens CSS Creator in a New Window" />
<span> Open CSS Creator </span> </a>
</div>
<BR />
<BR />
<a href="http//www.csscreator.com" target="_blank"
onclick="return !window.open(this.href);">another place</a>
<BR />
<BR />
<BR />
<BR />
<BR />

Concept adapted from Stu Nichol's http//www.webreference.com/programming/image_map/

<dl id="imap">
<dt><a id="title" href="#nogo" title="The Beatles">The Beatles</a></dt>
<dd id="picp"><a id="paul" title="Paul McCartney" href="http//www.csscreator.com" target="_blank"><span>Paul McCartney - Bass Guitar and Vocals<br /><br />Paul McCartney's song, Yesterday, recently voted the most popular song of the century by a BBC poll, was initially composed without lyrics. Paul used the working title 'scrambled eggs' before coming up with the final words.
<BR /><BR />
If you left-click on Paul, you'll go to CSS Creator in a new window.</span></a></dd>
<dd id="picr"><a id="ringo" title="Ringo Starr" href="http//www.csscreator.com" target="_blank"><span>Ringo Starr - Drums<br /><br />Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, when she wouldn't come out and play with Mia and the Beatles at a religious retreat in India.
<BR /><BR />
If you left-click on Ringo, you'll go to CSS Creator in a new window.
</span></a></dd>
<dd id="picj"><a id="john" title="John Lennon" href="http//www.csscreator.com" target="_blank"><span>John Lennon - Guitar and Vocals<br /><br />In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool contest principally because they called in posing as different people and voted for themselves numerous times.
<BR /><BR />
If you left-click on John, you'll go to CSS Creator in a new window.
</span></a></dd>
<dd id="picg"><a id="george" title="George Harrison" href="http//www.csscreator.com" target="_blank"><span>George Harrison - Lead Guitar and Vocals<br /><br />The Beatles' last public concert was held in San Francisco's Candlestick Park on August 29, 1966.
<BR /><BR />
If you left-click on George, you'll go to CSS Creator in a new window.
</span></a></dd>
</dl>

This combines Nichol's CSS Image Rollover with an adapted Angeletti Trifecta CSS Rollover and includes an external link that opens in another window.
I've replaced Angeletti's fixed Span Text with Nichol's method of positioning the Span Text, as a part of the CSS-Rollover, anywhere you want on the page.
The link looks like a text Hyperlink, but it's really an image. It also has a helpful icon indicating that clicking this will result in another window opening.

<dl id="nmap">
<dt><a id="A1" href="#nogo" title=""></a></dt>
<dd id="dd1"><a id="A2" title="Left-Click Opens CSS Creator in a New Window" href="http//www.csscreator.com" target="_blank">
<span>If you Left-Click now, You Will Visit CSS Creator in a New Window</span></a></dd>
</dl>
<BR />
<BR />
<BR />

</body>

</html>

There are Mosaic Firefox problems still; but Internet Explorer 6 XPSP2 works. Maybe this can be remedied.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 26 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Accessibility – Opening in New Window.

The CSS rollover at the very bottom of the page shows the end-user a "guidance" image containing a text message. A piece of text is "popped" above too which tells the end-user what's going to happen if he clicks the link. The alt text tells the same story.

The various tries at this throughout the page are just tries; nothing more. The bottom-most link is the result.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 11 years 4 days ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Accessibility – Opening in New Window.

Thanks for that I hadn’t thought about using an image for it. I suppose the problem would be that the link text won’t scale with the rest of the text and it seems a shame to have to use another SPAN. After some thought we decided that we would just do it like this:

<a title="CSS Creator (opens in new Window)" onclick="targetBlank(this.href);return false;" href="http://www.csscreator.com/"><img alt="CSS Creator (opens in new window)" src="/img/external_link.gif" title="CSS Creator (opens in new window)" /> CSS Creator </a> This has an icon inside the text to make use of the ALT tag, the link itself has a title (which should not be relied on as screen reading devices are inconsistent) and the image also has a title. I reckon this might be overkill though as this might annoy / confuse someone with a screen reader but at least they should get the message. Anyone with any thoughts on this? I suppose then there is a small problem with people with Javascript turned off who would get the message but it would not open in a new link.

I suppose another way would be to have the link text as CSS creator.com (opens in new window) but to surround the (opens in new window) in a span and give it a text indent of -1000 or something. That way a screen reader should still be able to see it. Anyone any opinions on this?

Another improvement on the above technique would be to use a class or the link attribute to let the DOM target it and put the javascript in a separate file to separate it from the content.

Thanks for the Stu Nicholls image map link by the way! I can see that being useful!

Thanks again.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Accessibility – Opening in New Window.

Sigh.

Left-Click Opens New Window.gif)

You might want to think about renaming your images without spaces.

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 26 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Accessibility – Opening in New Window.

Thanks for the opportunity to look at this. A couple points - I made a quick Arial 8 text image for the rollover, and it might not by scaled to the surrounding text. But I think an image that was made with more care and the correct font could appear as though it was in-line with the rest. I feel the original image could be made to also appear in-line scaled to its surrounding text by adjusting its position.

Mr. Nichols' example didn't work well on Internet Explorer nor on Mozilla Firefox with a 800x600 display. His pop-up text boxes appeared below the display surface. If you get rid of the navigation toolbar at the top to make more surface, you can read Ringo, John and George. But Paul's text still doesn't show entirely. So, I fixed the example by displaying his text boxes on top of the subjects instead. Just wanted to let you know so that if you do borrow the concept, you might see a difference in how his shows on your display.

I would like to ask a question about your view of SPAN. Is there something it does that a new person should know about?

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 11 years 4 days ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Accessibility – Opening in New Window.

Span is just an empty generic element that carries no meaning just like a div. The difference between spans and DIVs is that spans are inline elements.

The reason I said that it's a shame to use an extra SPAN is that I am trying (at least!) to get my code to be as lean as possible so that it is smaller and easier to edit.

What I meant about the image for text is that there is no way of scaling the image and if the rest of the text in the page was increased this would not do the same.

It would be interesting to know what a screen reader would make of my link but I have a feeling that each different type would read it different and then it would depend on the person’s settings. Sometimes the whole issue of accessibility seems to come down to educated guesses or even stabs in the dark!

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 17 years 26 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Accessibility – Opening in New Window.

CSS-coder Mr. Wedin has a nice, short page on this topic.

"free screen reader for Firefox. It’s called Fire Vox" found at

http//jedisthlm.com/2005/01/05/accessibility-resources/

These folks seem pretty serious

http//docmorph.nlm.nih.gov/docmorph/default.htm

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 11 years 4 days ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Accessibility – Opening in New Window.

excellent thats great. Thanks for your help.