I have a map that displays custom markers with filtering options and different markers colors based on the filtering options. Clicking a marker displays a text bubble with a picture as expected.
What is required to make a google map comply with level A. Obviously a screen reader version will be far less exciting.
WCAG 2.0
What do I need to do to make my google map comply with WCAG 2.0 level A?
EDIT:
I think I need a solution for:
1.1 TEXT ALTERNATIVES
-Map has hundreds of markers, and not accessible because they exist as js objects
1.3 ADAPTABLE
-It's not possible to detect a screen reader and adapt accordingly
2.1 KEYBOARD ACCESSIBLE
-Google maps does not provide hot-keys although I'm sure it's possible to wire some up with js.
4.1 COMPATIBLE
-This would rule out any js hacks to make google maps respond to hotkeys.
What's best practice?
What about linking to a list of my markers as text via an accessible version link?
My solution for this is going to be:
Treat the map like video/media content
Provide a text list similar to what's being displayed on the map on an alternate page. With the link clearly labeled as the accessible version.
Provide a description of what the map is trying to achieve.
This is a section of the WCAG 2.0 that talks about linking to accessible versions:
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G73
Someone is trying to solve a similar problem here:
http://www.accessifyforum.com/viewtopic.php?t=23294
Related
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?
It would be unwise to attempt to do what you are suggesting. By attempting to "improve" the score that your automated tool is giving you, you would almost certainly be degrading accessibility for actual humans.
The issue here is that embedded Google Maps are not accessible for non-sighted visitors, full-stop. Doing hacky things with JavaScript won't fix that. To the best of my knowledge, none of the major interactive maps are very accessible. Here are a few of the reasons why.
If you genuinely are concerned about the accessibility of your webpage, and not just an arbitrary number that some tool gives you, then there are a few things you can do:
Understand that non-sighted visitors won't be able to use interactive maps. Offer alternatives instead, like text directions. Clearly state any relevant addresses in the text of the page.
If your page contains embedded maps, you may wish to hide that content from screen reader users with the aria-hidden attribute.
The Google Maps web interface offers a reasonably OK level of accessibility when it comes to directions between two points. The directions URLs are of the format: https://www.google.com/maps/dir/?api=1&destination=Rockefeller+Plaza,+New+York,+NY+10111.
Use techniques that make use of special markup that is only announced to screen reader users.
Keep in mind that you are creating webpages for actual humans, not robots.
Test your pages using free tools, like NVDA or VoiceOver with more than one browser.
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/
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";
}
});
});
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.
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.
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";
});
});
As I'm going over the documentation of https://developers.google.com/maps/documentation/ios/overlays and https://developers.google.com/maps/documentation/javascript/overlays
there is a huge gap, same goes for other functionalities and abilities, I was wondering if there is a way to "wrap" the javascript abilities in order to use them in IOS applications
for example create a custom overlay or dragable marker, or even use distance, geocoding and elevation services
You can use a UIWebView in your iOS app, and then use the JavaScript API in there. This gives you access to all of the features of the JavaScript API, but you would lose the iOS-specific features (like rotating/tilting the map, 3D buildings), and there are other downsides (like performance, offline use, etc).
You can use Google Maps data services like the elevation API from an iOS app by making a web request to the appropriate URL, and then drawing/displaying the results within the app. It's a bit more complicated than the JavaScript API which is already integrated with the underlying maps API, but it's doable.
But yes, the major limitation of the Google Maps iOS API is its minimal support for custom overlays. The latest version includes tile overlays, but if you want something more dynamic this might not be enough. There's a feature request for dynamic overlays here, but I don't think it's on Google's priority list. Something like a draggable marker might require you to implement the dragging yourself, or it might not be possible. Annotation and overlay support is one area where Apple's MapKit still offers more flexibility than the Google Maps SDK for iOS, so you might want to take a look at that as an option (but then you can't use Google Maps data services).
What approaches are there for hiding Google's Static Maps on wider viewports, while displaying the dynamic Google JavaScript Maps instead?
It is common to build mobile-first websites, enhanced through CSS media queries for larger viewports.
When it comes to maps, static ones are arguably better for mobile UX (smartphones too). But you might decide that for larger viewports (computer displays and even tablets), the interactive/dynamic maps may be better for your users — depending on the purpose of the website.
What criteria are important to use to choose the best approach to combine the two? What should one be careful with?
I have not been able to find a conclusive answer, but here is my research so far:
One author suggested in 2010 that a fallback option is built into the JavaScipt API:
The basic premise here is that the API replaces the content of the
map_canvas container with the map display. So, why not just add some
fallback content to that container?
Modifying his code, I can insert an image inside the div that will become the JS-enabled Google Maps. In this case, the image is from Static Maps V2:
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">
<img src="http://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false">
</div>
</body>
However, that does not disable JavaScript Maps on smartphones — simply provides a fallback for devices without JS.
Another author (also in 2010) also suggests to use a single line of jQuery to hide that image — the updates code for V3 would likely be:
$('#map_canvas img').remove();
But that also does nothing to disable Google's JS Maps on narrow-viewport devices (smartphones).
Both of those guides are from 2010 — likely using V2 of Google Maps? (I even came across another author's guide from 2009 using some clever regex, but he is yet to update to "the new way [V3] of doing things".)
The second approach(hiding the image) is absolutely useless, the image will be replaced anyway when the map loads.
The first approach looks good, all you need is a condition at the start of initialize(), where you filter "small" devices and leave the function. It may look like that:
if(Math.min(screen.width,screen.height)<768){
return;
}
I am researching the feasibility of setting up a mapping tool for my alliance in an online game.
The game is not based in the real world so I am not interested in the content of the map tools available, just the functionality.
Minimally, I would like the map to display information about where allied cities are located in the world. Ideally, I'd like to be able to display information about desired trades, levels of development, and military actions. All this should be editable by the map users.
I've been looking at the google maps API and it appears that I could use it to serve my ends by using my own map tiles with a custom defined map object and some custom overlays, but it looks like it would be a lot of work to set up.
Is there another tool that would be better suited to this task?
A List Apart has an article from the creators of EveryBlock.com. They use a full open-source stack (client side library, tile cache, map generator) as an alternative to Google Maps. That sounds like it has exactly what you need.
I would argue that the Goole Maps API approach is not as difficult as you imagine. The API provides a very nice interface to define custom tilesets to render your own maps.
This interface is actually quite simple to use. There is a detailed description of it here. When you create a GMapType object you can specify a vector of urls to your own image tiles, label images and fundamentally change the display paradigm.
There are quite a few examples of this on the web:
George R R Martin's Game of Thrones. I found the javascript they have written pretty clear.
The Oblivion Gameworld (as Matt mentioned).
World of Warcraft Gameworld
I reckon this is a really powerful way of implementing your own maps on the web.
There is a google map implementation of the Oblivion gameworld - this might serve as a reference.
Wouldn't defining your own overlay with a KMZ file in Google Maps work?