Breaking a bit of a rule here in order to help out a colleague – committing code without tests. Gasp!!! I have been working on this for a while but got interrupted and have not gone back to make sure all my tests work, but a colleague needs this work, so…here it is.

Patrick Lauke did a posting on how to make Google Maps accessible a while back but it is out of date, so I took a shot at making Google maps v3 accessible.

First things first, Google has really made absolutely no attempt to make Google maps accessible at all and the fact that I can take a weekend, without access to their code and make it basically fully keyboard and screen reader accessible (at least for the basic functionality) speaks to how irrelevant accessibility seems to be to them. Shame on you Googlers!!

Secondly, the Google maps markup is obviously generated because it does not contain a single class. It does not contain a style sheet and all of the styling is inline for all the elements. This makes the code particularly difficult to retro. I basically had to resort to looking for the title attributes on elements to try to figure out what they are. This means that this code is language dependent. I did go to the trouble of making it work for both English and German, and would appreciate any assistance in adding support for other languages. Please use the normal pull request mechanism in the a11yfy repository to contribute.

As you can tell from the above paragraph, the code has been integrated into the a11yfy repo BUT is independent of the rest of the library, so using it is simple. Simply include one JavaScript file into your page…

    http://gmaps/jquery.a11yfy.gmaps.js

…and then call the gmaps() jQuery method on the container that contains the Google Map element(s)…

    jQuery(document).gmaps();

The Accessible Google Maps demo is up on my github.io pages and there is also an example in the google-maps.html file in the examples directory in the repository that you can use to play around with this. Please send feedback via GitHub or comments on this posting.

Limitations of this implementation is that it works only for the default functionality and I have not tested it with multiple maps on the same page (I think it will not work – at least not the sliders and not unless you call the gmaps() function once for each map), but the concept can be expanded to add support for any/all of the Google Maps features. Perhaps you can contribute to this by adding support for the features you are using or requesting a feature on GitHub.

UPDATE 11/24/2013: Added the link to the running example on github.io.

UPDATE 3/23/2014: Fixed the link to the running example on github.io.