« jkrowling.com | Main | How many accessibility experts does it take to screw in a lightbulb? »
July 21, 2005
Progressive Disclosure
I wanted to continue some notes about the JK Rowling site (www.jkrowling.com).
Progressive disclosure
As I mentioned yesterday, one of the things I really love about the site is the simplicity of it. Perhaps my favorite aspect of the site is the way it handles complex elements. One of the key usability challenges for screen reader users is getting to the information you want on a page. There are a number of places on the site where there are a lot of little elements grouped together. In these cases, the screen reader user has to listen to these elements on the page before they can get to the info they want.
As one example, take the phone. In the upper left hand corner of the site is a mobile phone. It allows you to dial numbers and even receive calls. The problem with the phone is that it has 13 buttons. For someone viewing the site using a screen reader, reading the site in it unmodified form would mean listening to all of the buttons on the phone, one by one until they got to the next section of the site, the scrapbook. This is a very tedious way of navigating the site.
To address this issue, the developer grouped these buttons together into one button. When the screen reader comes to the phone, they hear, “Mobile phone, click here to pick up the phone button.” By default, the .silent property of all of the buttons is set to true. When the user picks up the phone, the buttons are exposed and the rest of the site is hidden. The only other addition is that the developer added a button to ‘hang up’ the phone and restore the default state.
This is a very simple shell game called progressive disclosure. It is analogous to rollover menus in JavaScript we see visually all the time. It provides the user with a limited set of information and then provides more only when the user asks for it. Technically, it is not difficult to implement. It only requires the author to group items logically and then use the .silent property to show and hide objects as needed.
Posted by Bob Regan at July 21, 2005 02:57 PM