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 Comments

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

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

    http://www.w3.org/WAI/PF/aria

    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

  • 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.

  • Brown Brothers Engineers

    Brown Brothers Engineers

    Our final website launch of 2013 brings Brown Brothers Engineers to life. Established in New Zealand in 1908 initially specialising in electrical engineering and later diversifying into pump manufacture for domestic and commercial use, Brown Brothers Engineers today employs 140 people in 13 locations throughout Australia and New Zealand.

  • Richmond Fellowship Queensland (RFQ) Annual Report

    Richmond Fellowship Queensland are a community-owned organisation that supports people facing mental health challenges and social disadvantage. This year Propeller were delighted to have the opportunity to work on RFQ’s annual report.

  • Make Your Data Dazzling with an Infographic

    Incredible Infographic

    Looking for a better way to get your point across? An Infographic could be the answer…

    It seems almost everyone is facebooking or tweeting a cool infographic these days, their rise in popularity throughout social media and on websites has been meteoric and we’ve had a few people ask us ‘what’s these info-thingy’s?’…

  • OpenSSL (Heartbleed) Advisory for PropellerMail

    OpenSSL is an open source software suite that is used all over the world to encrypt communications over the internet. Heartbleed is the name given to a bug in that software that could allow unencrypted access to that information while it is in server memory.

  • Changes to Email Configuration

    It has come to our attention that previous (and some current) versions of hosting cPanel services have incorrectly displayed email account logins with the following format:

  • Scheduled upgrade of cPanel hosting service

    We are excited to announce that we are now in the final stages of a major cPanel hosting infrastructure upgrade.

Get The Latest!

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