google-map tiles missing alt tag causing lower accessibility score

Question

How can we add blank alt tags to the Google map tiles (generated by v3 api) so that they do not lower our accessibility score?

http://berkeley.edu/map/googlemap/

Battik

What "accessibility score" are you talking about? – Careworn

Answer 1

Couldn't let this 1 go

You can use the tilesloaded event then use jQuery to modify the images post render

google.maps.event.addListener(this.map, 'tilesloaded', function(evt){
    $(this.getDiv()).find("img").each(function(i, eimg){
      if(!eimg.alt || eimg.alt ===""){
         eimg.alt = "Google Maps Image";
      }
    });
 });

Tomchay

Nice one thanks mate, crazy Google doesn't include an alt tag on the logo! – Octodecimo

Since the images are being used for presentation purposes, they can be set to empty strings. Otherwise, screen readers would read out each: "Google Maps Image, Google Maps Image..." – Stalnaker

Answer 2

It's not at clear that adding ALT to content that is inherently graphical is going to do much good from an actual accessibility point of view. Stepping back a bit:

• What tool are you using to generate this score?

• Do you care about some tool-generated score for some mandated compliance reason, or is the real goal here to make your pages actually accessible?

• And how are you using the tiles? Is this on a set of pages that you yourself own?

The goal here really should be accessibility, not compliance as measured by a tool; tools are supposed to help with this task, but unfortunately there are many cases where tools measure adherence to some set of rules, but cannot measure accessibility itself. For example, a tool can determine whether an image has an ALT attribute; but the ALT attribute has to be present and meaningful in order for the image to be actually accessible. So try to think about the bigger picture - keeping the users happy - not just about trying to keep the tool happy.

If you are displaying these tiles in your own set of pages, your best bet might be to have text somewhere else on the page that explains what's going on in the image. For example, if it's a map providing directions to some place, provide textual directions alongside.

The right solution here really depends on what you want to use the images for - can you provide more details on what the larger project is here?

Once you've got some accessible alternative to the graphical tiles in place, your best bet for handling the actual IMG tiles might be to set alt="", which tells a screenreader to ignore them outright; this is likely the best course of action here since having a screenreader read out "image, image, image..." isn't going to be particularly helpful.

--

Assuming that you're talking specifically about the Berkeley Campus Map at http://berkeley.edu/map/googlemap/ - that's an interesting case. There's a list of buildings along the left edge, and a map in the main part of the page. Click a building, and a pin appears with a popup with some information and a more link, click that more link and a lightbox appears with more detailed information.

One issue that I see here is that when a screenreader user clicks one of the links on the left side, they may not know that a popup has appeared with more information elsewhere on the page. Even if you know there's a popup there, you'd then have to navigate over the intermediate links to get to its content, which would be somewhat awkward. (Hiding the images with alt="" at least means that they don't have to navigate over all of those.)

Perhaps moving the focus into the popup would help here (screenreaders generally follow where focus goes), but that might be tricky if the popup is managed by Google Maps code. And this is likely something that would need to be tested with a real-world screenreader such as the free NVDA on a PC or VoiceOver on a Mac - and even better, verified with a real-world screenreader user!

At this point, we're now getting deep into the specifics of that particular page, which might be out of scope for this answer, but it really does help make the point that for situations like these, you have to look at accessibility at a page-level issue (directory of campus buildings) rather than just looking at one problematic component (IMG elements) in isolation.

Ursine

Answer 3

I work for a company (Deque Systems) that creates an Enterprise scanning engine that generates an accessibility score for each page and each project. My recommendation is to use that as a very rough guide ONLY and to instead focus your efforts on making sure your site is really accessible. Automated testing tools can only catch 30% - 50% of accessibility issues.

In terms of a "more accessible" Google maps - take a look at this "accessible" version of Google maps I created. It does more than simply add alt attributes to the image tiles. It also adds focus styles (albeit ugly ones) to the focusable elements and adds accessible names to the controls where these are missing. Note that it is language dependent and my implementation only works for English and German.

Careworn

Answer 4

I ended up using javascript to add the alt tags. Please note the map id is unique to my specific map.

google.maps.event.addListener(this.map, 'tilesloaded', function() {
  var images = document.querySelectorAll('#gmap_canvas1 img');
  images.forEach(function(image) {
    image.alt = "Google Maps Image";
  });
});

Arteriotomy