Web designers and developers have an increasing obligation to design and develop sites that are accessible. Almost 1 in 5 Australian’s have a disability. It therefore makes good business and marketing sense to ensure your websites are accessible. And then there is the law! Website owners are obliged to comply with the Australian Disability Discrimination Act 1992. Large companies are currently being sued in the United States for having sites that are inaccessible. Current companies facing lawsuits include America Online, Target, Southwest airlines. In 1999, the Sydney Organizing Committee for the Olympic Games (SOCOG) were sued by Bruce Maquire, a blind user.

I encourage all web designers, developers and website owners to read the World Wide Web Access: Disability Discrimination Act Advisory Notes provided by the Australian Human Rights and Equal Opportunity Commission.

So with accessibility in mind, lets talk about Pop-ups!

Pop-up windows have been a big topic of conversation over the years, and it continues to this day. The consensus however among usability and accessibility experts is that pop-ups are not user friendly and they are inaccessible. I agree, for the following reasons:

  • all major browsers have a pop-up blocker installed
  • opening a page or image in a new window causes disorientation for the user and ultimately results in many windows being opened during an internet browsing session
  • opening a page/image in a new window renders the browsers back button inoperable, the user can not use the back button in the new window to go back to the previous page they were on
  • opening a new window bypasses the inherently easy to use tabbed navigation feature in Firefox, a browser used by 10-15% of internet users
  • the user should determine when a new window is opened. It is an easy process within all browsers to open a link in a new window, usually by either right clicking the link, holding down the shift key (or apple key on a mac) while clicking the link
  • screen readers will generally always read the window that is on top, hence when a pop-up window is triggered content read from the new window is often mistaken for being within the main window, causing confusion

So with all those reasons in mind, lets avoid using pop-ups.

What is a suitable alternative to the pop-up?

It is only fair now that I suggest an alternative. Given that screen readers can not (at this time) reliably detect and read dynamically built content I propose the following “Good Sense” approach:

The “Good Sense” Approach
The popup is usually reserved for content such as images, terms and conditions, glossaries, email a friend etc. Since screen readers are traditionally used by visually impaired users, I suggest that in instances where you would like to display larger versions of images we simply caption the thumbnail in a manner that will alert screen reader users to the fact that the link offered is not going to tell them anything more than what is already offered, and caption the thumbnail images with as much descriptive information as possible.

Example: <a rel="lightbox" title="go to large version of image" href="http://www.domain.com.au/gallery/large/1"><img alt="large whale breaching the icy waters of the south pacific" src="http://www.netlife.com.au/images/1-thumb.jpg" /></a>

In using this approach:

  • screen reader users would hear “go to large version of image” and “large whale breaching the icy waters of the south pacific”. With this information the screen reader user is better able to realise that clicking the link will only give them the same information as has already been read to them
  • sighted users with javascript enabled browsers wishing to see a larger version can click the thumbnail. The attached javascript function ‘lightbox()’ would then render the larger version of the image as desired
  • with javascript turned off, users that click the thumbnail would be taken to another page displaying the larger version and caption

So what about content other than images? My suggestion here is don’t dynamically generate this content, instead link to another page that contains the content. If need be, place a ‘Back’ button on this page so that users can quickly navigate back to the web page from which they came. Another approach could be placing the content at the bottom of the page and hyperlinking to it with ‘back to main content’ links nearby.

So, there we have it. A strong recommendation to stop using pop-ups and a suggestion on how to move forward.