Who Says Accessible Web Design is Boring? Announcing New Windows with Trendy Style

Recently I explained why opening links in new windows is an accessibility issue and I offered one technique that announced in the link text that a new window opens as in this example:

Check out the Accessibility Checklist for Blog Posts (opens new window).

The code snippet reads:

<p>Check out the <a href=""http://blogaccessibility.com/accessibility-checklist-for-blog-posts.html" target="_blank">accessibility checklist (opens new window)</a>.</p>

However, I was not thrilled with that technique because adding “(opens new window)” (or a similar variation) to links felt clumsy, clunky, unsophisticated. And, if the Web Accessibility Consultant isn’t thrilled with the technique, what are the chances that others will buy in and comply with the Web Content Accessibility Guidelines (WCAG) 2.0 requirement:

3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)

Using the link title: A slight improvement

An example of a link title pop upA client then used the link title – the tooltip that pops up when hovering a mouse over a text link – to announce the new window. A creative solution – actually, a technique offered by the WCAG – but it still has accessibility issues, including but not limited to:

  • Individuals using screen readers often turn off titles to reduce the amount of auditory information through which to navigate;
  • Individuals using only the keyboard do not have access to the link titles;
  • Individuals needing larger text cannot resize the tooltip text within the browser alone.

Take this text link as an example:

Check out the Accessibility Checklist for Blog Posts.

which includes title="Opens in a new window".

Try accessing the title via your keyboard or increasing the font size of the tooltip from within your browser. Go ahead and try; I’ll wait.

The CSS warning: Even better

Again, not overly thrilled with using the title as the solution, I did what any good consultant would do. I went searching for a better solution, which led me to the WCAG 2.0 Technique G201: Giving users advanced warning when opening a new window. The second example "Using CSS to provide a warning before opening a new window" looked promising.

By using cascading style sheets (CSS), the text “Opens a new window” is hidden off screen until the link receives focus, at which point the message becomes visible with a brightly coloured background.

wai-css-weindow-warning

This solution is an improvement over using the title attribute because:

  • the message is accessible to individuals using screen readers,
  • the message appears when individuals use the TAB to navigate to the link (try the working example), and
  • the font size can be increased from within the browser (no need for additional magnification software for individuals requiring only larger type).

The trendy CSS warning: Stylish and accessible

I was intrigued, but wanted another opinion. I tweeted, of course. Both Steve Buell and Marco Battilana (@crazybat) responded, and concurred the CSS technique was more accessible but that the code could be clearer and even better.

Several tweets and a few tweaks later, Marco of Crazy Bat Design created the ultimate solution:

A link opening in a new window is indicated by a pop up message and a small icon

By enhancing the CSS concept in the previous technique:

  • the font size increases from within the browser;
  • the external link icon provides a visual cue;
  • the message is accessible to individuals using screen readers and the keyboard;
  • the background completely blocks out any surrounding text to ensure readability; and
  • the drop shadow further emphasizes the message. 

Causing a link to open in a new window should be done in only select circumstances, however announcing that this is about to happen can be done with grace and trendy style.

Who says accessible web design needs to be boring?

2 Responses to Who Says Accessible Web Design is Boring? Announcing New Windows with Trendy Style
  1. Graham Armfield
    Twitter:
    July 22, 2011 | 12:28 am

    It’s a nice technique Glenda and the keyboard focus aspect is good.

    I foresee a slight downside though which is the extra span that’s required in the markup. How many bloggers who are not well versed in HTML will remember to put that in?

    Perhaps there is a solution –
    Maybe the CSS could actually automatically generate the span for all rel=”external” links. Is CSS generated content voiced by screen readers?

    Alternatively I suppose if using WordPress it would be possible to create a filter to add the span in automatically.

    There is a difference however between links which open a new window and links to external sites. Your article is about the former and the demo is about the latter. That’s not to say the techniques can’t be combined.

  2. enjoytheweb.nl
    November 20, 2011 | 8:49 am

    Accessible web design refers to the creation of web pages that are accessible to all users, including users with disabilities. Accessible web design is built in aid of many disabled people including those who are visually impaired (poor eye sight, colour blindness), motor impaired (Parkinson’s disease, cerebral palsy) and hearing impaired (deaf).

Leave a Reply to Graham Armfield

Wanting to leave an <em>phasis on your comment?

Trackback URL http://blogaccessibility.com/who-says-accessible-web-design-is-boring-announcing-new-windows-with-trendy-style/trackback/