Improving Website Image and Map Accessibility

People are becoming more aware of the need to make their website content accessible to the widest audience possible, and not excluding those less able. As a developer, I make sure I have the best tools to help me deliver solutions that meet growing customer requirements in this area. Although there are established guidelines and techniques, sometimes it is easy to overlook how simplified semantic mark-up can further improve the accessibility of your content.  This is particularly the case when it comes to information like maps that are represented graphically.

Recently I was assigned to design and create an interface for a local government website, the City of Boroondara for their new Boroondara Communities initiative. The project sets out to improve the Ward and Councillors section of the existing website.

Boroondara City Council services it's residents, some of which have higher accessibility requirements than others. Just as the Council endeavors to assist these particular residents by providing easy-access to their services offline, their online offerings are equally important. My implementation needed to take this into account especially from the perspective of screen-reader dependent users.

The previous interface made use of a client-side HTML image map, used in conjunction with a graphical map of the City of Boroondara. Visually, the map was divided into segments, known as "Wards", and labeled with boundary streets and ward names. For those of us that can see, here is what it looked like:

The words on the screen only really meant something to users who can see.  For those that require text-to-speech translation of the content, we need to look at it in a different way.

Using the existing content and a supplied requirements specification, I began Datalink's formal design process, which included a series of wireframes followed by hi-fidelity Photoshop images for final sign-off by the customer. Once approval was received, I began implementing the design into the Freestyler content management system.

My design included a new version of this map which had an exciting 3D look, but I also considered the heightened importance of accessibility for this client. Here is how the map looks now:

Some developers might say that recreating or even re-using the existing map would meet the minimum requirements for accessibility here. In actual fact, they would be perfectly right in saying such a thing, after all, image maps can have "alt" and "title" attributes for each of the areas. Placing the ward name into either of these would provide enough information to screenreader user, right? Actually, that's not the case at all.  

During the course of implementing such a solution, another opportunity becomes apparent.  Wouldn't it be more useful to screenreader users if these street names were related to wards by their position somehow?  Perhaps we could indicate if they are a north, south, east, or west boundary.  Similarly, was there a way of indicating the position of a ward  that might actually help those users get a picture of things without having to actually see the map at all.

I'll briefly explain how I took a particular approach with the aim of further improving the website's accessibility through greater attention to detail.