OpenLayers, Accessibility & Drupal

By:

on

April 06, 2012

I've been curious about maps and accessibility, but it hasn't been something I've had much time to explore. Because maps are so visual, it's hard to think about how to make them fully accessible. Sarah Bourne in Making maps accessible asks the serious questions that that are at the heart of this issue, and frankly ones that I haven't had the opportunity to explore.

I have recently begun learning more about digital maps, thanks to some recent work involving OpenLayers. I had an opportunity to think about this a problem on a practical level of how can I help to improve the tools that are being used. Needless to say, mapping is complicated. Trying to work this mapping library into another system threw additional complications. Drupal uses jQuery extensively and with Drupal 7, all Javascript is now jQuery namespaced, so it needs to be properly encapsulated. But being new to OpenLayers & not a JavaScript developer, all of the little quirks in trying to combine all of these JavaScript libraries was a real challenge.

I'm still wrapping my head around digital projections as there are hundreds of ways of implementing them. The standard way that web mapping is done is with EPSG (created by the now defunct European Petroleum Survey Group ) references. Common ones now include 900913 (which spells Google with numbers) and 4326 (World Geodetic System - an unprojected representation). The Atlas of Canada has historically encouraged 102009 (Lambert Conformal Conic) for representing data through web map service, but supports 48 projections for any of their maps.

Accessibility

One of the easiest barriers to address when working to improve accessibility is to ensure that the page can be accessed with a keyboard-only user. There's a comprehensive document by Opera on how to do this with GoogleMaps, but I haven't seen anything like it for OpenLayers, least not in English. In Dutch, there's a good example in geozet. There are quite a few examples out there for OpenLayers, including from within their example pages, but they were all about producing a separate accessible version. Both the Government of Canada & the Netherlands have invested in building up a keyboard only plugin for an older version of the OpenLayers library, but I don't know that either has actively worked to contribute these back to the core library.

In looking at the WET GeoMap Feature I realized that a lot of the code implemented in the library wasn't actually related to accessibility issues. The accessibility enhancements were really contained in one Javascript Plugin that was added by the Web Experience Toolkit. Even in that one file (wet-boew.geomap.js) contained mostly code related to making OpenLayers bilingual. The accessibility components really can boil down to about 20 lines of JavaScript. Sadly the GeoMap library is nearly two versions behind the latest stable release of OpenLayers and isn't being actively enhanced.

If you're implementing a static HTML solution, then you can work with unnecessarily large libraries like the WET GeoMap, because it's been tested with the static WET framework. However, it hasn't been tested in the context of a CMS like Drupal, it's going to produce more problems than it's worth for 20 lines of JavaScript. The WET Geomap plugin for OpenLayers is unrelated to the OpenLayers plugins (that I could see), let alone jQuery plugins, and they all didn't play together nicely. When trying to deal with conflicting JavaScript libraries, you've got to be able to strip out as much complexity as possible and so began looking at the 20 or so lines of code which are actually providing alternate text and keyboard navigation capabilities.

Rather than approach this from the short term perspective of building a plugin, I looked at how I could bring keyboard navigation into the OpenLayers core code base. It was probably as much work to figure out how the OpenLayers library worked as it would be to get the GeoMap module working in a Drupal 7 environment, but with the important difference that there was the possibility to move the yard stick ahead. Keyboard accessibility is a pretty minimal level of accessibility, and looking into OpenLayers I can see many other ways to make it more accessible. Like many open source projects, OpenLayers is using GitHub. GitHub encourages people to fork the code for development and then makes it easier to contribute it back, so I set up my own OpenLayers repository.

Although far from perfect, I've added alternative text & keyboard navigation to the central navigation components of OpenLayers. You can tab through the map below, zoom in, pan left/right, & adjust visible layers now without ever using your mouse. Here's a demo of the work thus far:

I've enabled the issue queue for technical questions about this work. If there are issues around other issues mentioned here, please add them to the comments below.

About The Author

Mike Gifford is the founder of OpenConcept Consulting Inc, which he started in 1999. Since then, he has been particularly active in developing and extending open source content management systems to allow people to get closer to their content. Before starting OpenConcept, Mike had worked for a number of national NGOs including Oxfam Canada and Friends of the Earth.