15 06/2009Damien Buckley To mode or not to mode?

As regular visitors will know, we’ve recently re-built our site from the ground up, deleting old features and out-of-date content and introducing some new features along the way.

After perusing Modal Windows In Modern Web Design at Smashing Magazine it got me thinking about using a modal window for our contact form or PropellerMail login form. This would look cool and speed things up for regular visitors but what about accessibility?

Firstly I checked in with John Allsopp who kindly referred me to Damien McCormack at Vision Australia. I put the question to Damien, noting that we had already implemented a jQuery-based slider on our website and have also used Thickbox to enlarge our portfolio images. My rationale being that in using jQuery to roll up and add function to existing content, this was more of a progressive enhancement – sans either javascript or css, the content is all there and fully accessible to screen readers – in a similar vein, using Thickbox purely to provide larger images shouldn’t create an accessibility problem either – as long as the thumbnails include the requisite ‘alt’ attributes. In both instances, the enhancements are more eye-candy than functional processes but displaying critical content such as a contact or login form is another consideration altogether.

I’ll come to Damien’s response shortly but this morning I noticed this great tutorial – Integrate Thickbox with a contact form on TXP Tips and the reminder prompted me to start writing. Now before I go further, I just want to state that I’m not criticising either Smashing Magazine or TXP Tips as both are well put together, helpful articles, neither am I an expert in this area but with Modal windows seeming (for obvious reasons) to be flavour of the month, I just wanted to discuss the accessibility ramifications and hopefully some higher powers will swing by and add their experience to the discussion.

Damien McCormack from Vision Australia had this to say about it:

“Even for screen readers that can detect dynamic changes, the update (e.g. displaying a lightbox) is identified by a visual change on the appearance of the page however there is no equivalent notification for a screen reader user that new content has appeared – it is just there if they keep reading through the page. Where the new content for the lightbox appears is also important as the screen reader user will only meaningfully notice the new content if it appears as the next thing on the page.

For example if the lightbox is displayed after the user presses a Contact Us button, the new content needs to occur immediately after the code for the button for it to be meaningfully visible – however the screen reader user is likely to wonder what, if anything, happened when they pushed the button because they will not receive any notification.

Finally, because the screen reader user is actually moving through the page using a specific reading cursor provided by their assistive technology there is nothing to constrain this cursor to the modal area of the lightbox. Therefore the screen reader user can actually access any of the content on the page even if it is not part of the modal window. This could happen because they are reading through the content unaware that it is part of a lightbox, or more likely because the person uses link or heading navigation which accesses the entire page. Once the user moves outside the modal area it could be very difficult for them to identify the specific action they need to complete to get past the modal window and will probably lead to further confusion as they try and do things on other areas of the page that don’t work because they are not part of the modal window.

At this time, we therefore recommend that lightboxes are not used. If modal functionality is required then this should be implemented using either dialog boxes or by loading a new page.”

I did wonder if there were satisfactory fallbacks for those who do want to utilise these kinds of functions – perhaps providing a standard contact page in addition to the modal window? This could offer the best of both world’s though on another hand it could confuse matters more – by providing more than one link to the same or similar resources, this goes against the guidelines and for those using screen-readers, how would they know which to use – an informative title attribute perhaps?

No doubt the discussion will go on and regardless of the accessibility factors, people will continue to use modal windows in increasing numbers (just use Facebook for five minutes and you’ll work your way through them) – perhaps its time for screen-reader vendors to develop a solution (if indeed they haven’t already). For now, however, I’ve decided to stick with the current contact and login pages.

Like this? Share it!


  1. Gordon commented at 16:03 PM on 18 Jun 2009

    Is this an issue that WAI-ARIA was designed to alleviate?


    It would appear that implementation of this standard would address the first issue, alerting the AT to the fact that new content has appeared, and reading that content out.

    True modality is unlikely to be achieved in this fashion, but it seems like a workable compromise.

Recent Projects

  • The 'New' Stradbroke Island Beach Hotel Website

    Stradbroke Island Beach Hotel

    We dont often share single website launches but in this instance there is a degree of history behind it which speaks to a return on investment not normally associated with websites.

  • Brown Brothers Engineers New Zealand

    Brown Brothers Engineers New Zealand

    December 2013 saw the launch of a new Brown Brothers Engineers Australia website. October 2014 sees the turn of New Zealand parent company Brown Brothers Engineers.

  • RedFest 2014


    Read about Propeller’s 2014 responsive reboot of the RedFest website.

  • Into Harmony Health Services

    Into Harmony Health Services

    Into Harmony Health Services are located in Bayside, Brisbane. Melanie Young has been passionate about health and wellness for over 30 years. Following a substantial period of rehabilitation following a car accident and surviving cancer in her late twenties, Melanie has dedicated years of personal development and training to assisting other people with their health challenges.

Get The Latest!

Subscribe to our free e-newsletter for our latest news and offers - direct to your inbox.