Accessible Hyperlinks In ASP.NET
I wonder if there's anyone out there who enjoys pop-ups. Pop-ups have become a nuisance of the same magnitude as spam, except that everyone has learned to tame them. Google has a blocker. MSN has a blocker. WinXP SP2 adds a popup blocker of its own to the Internet Explorer. Both Opera and Mozilla Firefox have built-in pop-up blockers.
Besides being a pain in the neck pop-ups cause a couple of common problems:
- They mess up the browser's Back button. Everybody is used to using the Back button. Give it back to them.
- They make matters even worse for blind surfers because they might not realize a new window just popped up.
Following are the three most common approaches to opening new windows:
- <a href="..." target="..."
- <a href="..." onclick="window.open (...)"
Let's take a closer look at each one an talk about its pros and cons.
This one is the worst. Links rendered this way violate accessibility rules. Here's why:
- You can't bookmark this link.
- You can't open the link in a new window yourself. You're stuck with one choice and once choice only.
I wanted to also list something as an advantage of this approach, but I can't think of one.
Not as bad but still not good enough. Reasons?
- In the XHTML 1.0 standard the target attribute is deprecated. Therefore your pages will not validate against XHTML Strict. It is guaranteed this attribute will be solid gone in the future. The
targetattribute is still there in the XHTML Transitional DTD, but you're really indulging yourselves.
- The new window still doesn't have history and therefore the Back button is not operational.
<a href="http://google.com/" onclick="window.open(this.href, 'popupwindow', 'width=400,height=300,scrollbars,resizable'); return false;">Link text goes here<a>
The advantages of these links are many:
- You can simply follow them.
- You can choose to open them in a new window by right-clicking.
- You can bookmark them.
Hyperlinks in ASP.NET
To take Aaron's code a step further let's build a simple ASP.NET hyperlink control.
<asp:Hyperlink Runat="server" NavigateUrl="http://google.com/" onclick="window.open (this.href, 'popupwindow', 'width=400,height=300,scrollbars,resizable'); return false;">Link text goes here<asp:Hyperlink>
You won't see the
onclick event in IntelliSense, but don't worry—it'll get rendered fine.
Whichever option you implement remember this much: you are robbing a user of choice! It's up to the user, not the designer, to open a link in a new window. If you absolutely have to use a pop-up window give ample warning.