Making links more accessible (new Drupal module available)

Recently, our awesome University IT Accessibility Coordinator launched a tool that allows NC State website owners to scan their sites for accessibility issues (and usability, broken link, W3C Standards issues too). And after scanning many of the sites that i own or developed, a trend emerged: The top accessibility error (in terms of number of instances/offenses) on all my websites was:

     “Avoid specifying a new window as the target of a link with target=”_blank”

Now, while the debate will rage for many more months or years about whether it is right or wrong to forcibly open a link in a new tab or window, the accessibility issue is unquestionable.

Huh? What’s the problem?

The premise is that you need to provide information to the user before they click on a link, that the link will open in a new window or tab. Otherwise, when they click the link and end up on a new window, their back/forward buttons won’t work as expected.

The Non-Drupal Solution:

If you’re running a regular non-cms website, then you’ll have to fix all your links manually… or you could add a little jquery+css to do it for you:

Look at the source code for that page, and you’ll see that it searches the page for any link that opens in a new window, and adds a class to it, then adds a <span> with some text, which alerts the user on :focus, :hover and :active that a link is going to open in a new window.

Implementing this will solve your accessibility issues, but your fix won’t be reflected in the stats on the Accessibility Scan for NC State. The scanner doesn’t pick up the javascript, and so you won’t get credit in your ranking.

The Drupal Solution:

In Drupal, you can take advantage of “Filters” which run before the page is rendered, thereby changing the actual source code that is displayed (and scanned by the Accessibility Scanner). I developed a new Filter (not available on yet) that packages up all the functionality into a nice little module that you can then add to whatever input format you want. This means you can enable/disable it on different input formats, for different content types or whatever you want.

Here’s the module for download:

… or you can contribute on Github:

Right now there is only the Drupal 6 Version available, but i am planning to provide the Drupal 7 version shortly. As an added bonus, this module will add a title attribute to any matched links that don’t already have a title attribute.

This module is enabled on (hover over the “follow us on twitter” link on the right sidebar) as well as all the Hosted Drupal Websites at NC State.

Credit goes to Greg Kraus for his explanation and assistance, and you can check out his information about this accessibility issue here: