A More Accessible Map

by Seth Duffey

50 Reader Comments

Back to the Article
  1. I’m all for accessibility, and this article is a nice example of how bloated applications can be made friendly towards those with impairments. On another note, is it really safe to start using CSS(Cascading Style Sheets) 3 attributes?
    Copy & paste the code below to embed this comment.
  2. I’m not seeing the need for JavaScript in this situation, if anything it makes the map less accessible (I know JavaScript and Accessibility are not mutually exclusive, but still). There has been lots of examples of pure CSS image maps, which render mostly the same as the one shown here in addition to sharing similar markup. They also solve the CSS on/JavaScript off problem. Be careful with the ‘this’ keyword in object literals, they are never instantiated (nor can they be) so ‘this’ isn’t exactly meaningful in an object oriented sort of way. Relying on it may lead to unexpected results.
    Copy & paste the code below to embed this comment.
  3. Great example of the concept of always starting with the meaningful markup then style it and add it’s behaviour. Nice one ;)
    Copy & paste the code below to embed this comment.
  4. Another great article.  I did not think it would be this easy to create custom map applications. This will be a good starting point for alot of developers.
    Copy & paste the code below to embed this comment.
  5. Can anyone confirm the comment that “screen readers will ignore an HTML element with a style of display: none” Can this really be true? And if so, why would a screen reader pay any attention to the purely presentation layer of CSS?
    Copy & paste the code below to embed this comment.
  6. I’ve reread three times, peered at the examples, but I fail to see why javascript is needed for tooltips. the CSS :hover pseudoclass would give you the same results, and for the sake of Internet Explorer there is this wonderful little javascript from Peter Nederlof: http://www.xs4all.nl/~peterned/csshover.html I’m not sure if the map is always the added information to the tooltip text; in this example it maybe is as an indication of the place of a city added to the city information, but I guess there are many examples where the map itself plays a more central role. I think imagemaps would be better in that case. The technique is nice, the added benefits are clear, but only for appropriate needs.
    Copy & paste the code below to embed this comment.
  7. David wrote: bq. Can anyone confirm the comment that “screen readers will ignore an HTML element with a style of display: none”? Yes, indeed. See Joe Clark’s “Facts and Opinion About Fahrner Image Replacement”:http://www.alistapart.com/articles/fir/ in the October 20, 2003 issue of this magazine. bq. Can this really be true? And if so, why would a screen reader pay any attention to the purely presentation layer of CSS? Because they don’t talk to standards-based designers?
    Copy & paste the code below to embed this comment.
  8. Martijn wrote: bq. I’ve reread three times, peered at the examples, but I fail to see why javascript is needed for tooltips. At first I thought so too. I experimented with pure CSS options and, sure, you could use a selector like @dt:hover + dd@ to trigger the tooltip, but you lose the ability to add the “sticky” option. More importantly though, you lose the ability to turn the map “on” and “off.” I think turning the map “on” is a key feature and you could pretty easily enhance this script by creating a method to disable the map-based views _en masse_ or individually, which is a great usability enhancement.
    Copy & paste the code below to embed this comment.
  9. bq. Yes, indeed. See Joe Clark’s Facts and Opinion About Fahrner Image Replacement in the October 20, 2003 issue of this magazine. Wow - Great artical. Can’t belive I missed that one when crawling the ALA back catalog. However, surly the concusion that not reading _display: none;_ is wrong? afterall it is not _read: none;_ :-)
    Copy & paste the code below to embed this comment.
  10. To be realistic here, more people are going to use the Google/Yahoo map APIs than roll their own, so we also need a script to parse the DOM and place the locations and bubble content on a G/Y map. This of course won’t be as accessible as your pure CSS map, but it’s a lot better than pure Javascript map implementations.
    Copy & paste the code below to embed this comment.
  11. I have been working on a site which displays healthcare technology grants and projects in the United States.  I have argued with the business owner that unless someone needs to determine driving directions between points - or query data within a region - using a high resolution map, which can zoom past the state level just isn’t necessary. For some - perhaps most map applications, too much data is in the presentation. However, there is another side to this dirty edged sword.  To manage the data points, one needs a common denominator to work with.  Geocodes are the most efficient and there are tools (Yahoo has one) to input an address and get back a Geocode.  Now the problem is that the resolution of the data is extremely rich - very precise GPS positioning, several decimal points of latitude/longitude.  How does that scale into a 900px x 500px image? The answer is not very well. While working on a more dynamic, data driven site - here is a solution I came up with.  It employs the all famous styleswitcher to give the viewer a choice between viewing the data points - <li>‘s - on a map or in a hierarchical list. http://www.hitdashboard.com/unitedStates.aspx
    Copy & paste the code below to embed this comment.
  12. Has anyone else had a problem with this in Firefox and Safari?
    The tool tip loads fine for the first item but no others.
    But it works find in IE.
    Copy & paste the code below to embed this comment.
  13. if you have any sort of whitespace or tab between the opening <dt> and opening <a> it will not work in firefox/mac. I prefer to say
    <dt>
      link text
    </dt> so of course I’ve had a headache for the last 2 hours
    Copy & paste the code below to embed this comment.
  14. If you view the full listing of the [removed]
    http://www.alistapart.com/d/cssmaps/examples/js_full_listing.html You will find a method that strips whitespace called “stripWhitespace”. The
    stripWhitespace is used in the init method remove white space in the map dl:
    mapMaker.stripWhitespace(mapMaker.DLs);
    Copy & paste the code below to embed this comment.
  15. Have you considered looking at the geo microformat? (http://microformats.org/wiki/geo) I’d built a maps wrapper around it, described here: http://bluesmoon.blogspot.com/2006/01/of-microformats-and-geocoding.html It’s one way of doing accessible maps.
    Copy & paste the code below to embed this comment.
  16. Seth’s maps are interesting, imaginative and thought-provoking, but risk being ignored because they do not remotely satisfy the needs of visually unimpaired users of Google maps etc. One of the main uses of on-line maps is to ‘navigate’, not to discover the population and see a snapshot of the city that English speakers have always called (and continue to call) Bombay. And make no mistake, people do want to scroll and zoom, which is why the Ajax-powered rapidly-responding Google/ViaMichellin maps are so popular by comparison with the old world-wide-wait Multimaps. I think there are two questions that should be asked:
    1. Do visually-impaired people want to be able to obtain geographical navigational information of the sort provided by Google etc maps?
    2. If so, can such accessible information be incorporated into the Google/ViaMichellin type of thing or is some other alternative more practical and appropriate?
    Copy & paste the code below to embed this comment.
  17. I agree with what David has said above: that the consumers of Google/Yahoo maps are going to be more interested in navigating, scrolling, zooming etc, and less interested in pulling up little bits of data about the city. At the same time, I think that once people begin proving out these sorts of concepts, and showing that maps can be made accessible whilst providing the levels of interactivity available in the popular API’s, then the excuse that accessibility had to be relegated to the back row to allow innovation becomes a moot point. I think this article is an important first step, and would be interested in seeing some follows ups that start pushing it to the levels of flexibility that comes from the major API’s.
    Copy & paste the code below to embed this comment.
  18. In the third example: http://www.alistapart.com/d/cssmaps/on-example/index.html If I click one of those cities, and then return from Wikipedia to that map, there is no way to switch off the tooltip about the city, short of refreshing the page. It compounds as more cities are clicked and the back button used. This wasin Firefox 1.5/Windows.
    Copy & paste the code below to embed this comment.
  19. There is no denying it: text-based content can, if structured properly, be equally accessible to both the 20/20-vision general public, and to the visually impaired; but maps and other purely visual data cannot. I find the example in this article rather unrealistic (in agreement with comment 16 above): why would a visually impaired person go to a map site, to find out the population of Tokyo? Because that’s about the limit of what they can access in this example, and if they wanted to know that, they’d just go straight to Wikipedia. This article brings to light the possibilities of truly accessible maps, but I don’t think that the example in the article is such a map. A truly accessible map would provide the meaningful and contextual geographic information (the essence of the map) to all users: e.g. the latitude and longitude of each city, the distance and direction of the 10 nearest cities, nearby seas and mountains, etc. The real question is: if enough of the right text-based content is put into a map, can it be a real substitute for the full visual experience? The only way to know would be to attempt building such a map. _PS:_ all this is reminding me of MUDs (Multi User Dungeons - text-based multiplayer games), which are able to convey contextual geographic information through a text console. E.g.: “to your north is a city, to your south lies the ocean”, etc. Perhaps web-based maps could learn something from this?
    Copy & paste the code below to embed this comment.
  20. There’s no denying that this is more accessible than most, and I think that’s a brilliant place for us all to start.  I’m not convinced this method would carry over well to large applications, but for small sites I’ll certainly be using Seth’s technique in the future - thanks! On a side note: bq. PS: all this is reminding me of MUDs ... which are able to convey contextual geographic information through a text console. E.g.: “to your north is a city, to your south lies the ocean”? This makes me feel warm and fuzzy inside.  Let’s get started!
    Copy & paste the code below to embed this comment.
  21. At my “:hover emulation for IE5+”:http://users.hszk.bme.hu/~hj130/css/list_menu/hover/index.html
    solution, I used the same idea in my “hot spot example”:http://users.hszk.bme.hu/~hj130/css/list_menu/hover/example_hotspot/index.html
    . This way the tooltips are “half sticky”. You can mouseover the tooltip but it hides when you mouseout. I think in many situation this is easier for the user as clicking a close button to hide the tooltip.
    Copy & paste the code below to embed this comment.
  22. I did something similar to this a couple weeks ago (http://infinity-stuff.com/blog/20060313/interactive-images/), obviously not as nice as this but the same kind of idea. Its nice to see accessibility and neat effects combined together to make something great.
    Copy & paste the code below to embed this comment.
  23. Nice stuff .. sounds familiar. Reminds me of “an article”:http://www.data-travelers.de/2006/03/21/imagelist.html I wrote about a month ago - and my “old website”:http://www.f2w.de/article.php showing off that knowledge for more than half a year, too. ;) Note: Currently the domain name (data-travelers.de) is moving to another IP address, thus the link’ll be valid again in a few hours. cu, w0lf.
    Copy & paste the code below to embed this comment.
  24. I found while tabbing through the sticky example that the map would only show for every third press of the tab key. It seemed the first time it is pressed the sticky is shown and points to the Wikipedia link. The second the sticky is not shown and the link points to “[removed]void(0);” (presumably the close sticky button). The third press presents is to the same link as the first example, but no sticky (presumably to the Wikipedia link within the sticky). Can the modified code for the sticky version be updated to avoid following these links?
    Copy & paste the code below to embed this comment.
  25. A simple (although not very elegant) way around the tabbing in the sticky map example would be to add tabindex attributes to all the anchor tags within the DTs.
    Copy & paste the code below to embed this comment.
  26. If the HTML comment at the top of the source in the “stickymap example”:http://www.alistapart.com/d/cssmaps/stickymap/index.html is removed and the page is loaded in IE7b2, the tooltip layout breaks. The close button (a cross image) moves outside the tooltip, and if there is no image within the tooltip, text flows outside it on the right-hand side. Odd.
    Copy & paste the code below to embed this comment.
  27. The HTML comment at the top of the source causes IE6 (as well as IE7b2) to switch to quirks mode. This must be part of the problem. To test if IE is in standards-compliance or quirks mode, type
    [removed]alert(document.compatMode);
    into the address bar after loading a page. ‘BackCompat’ means quirks, ‘CSS1Compat’ means standards.
    Copy & paste the code below to embed this comment.
  28. Good article, I will be experimenting with this. Good to see with API’s, accesibility is still an option.
    Copy & paste the code below to embed this comment.
  29. for sure good article, nice map, more accessible than others but
    sorry but there is still a big problem. When i turn off the image but not the css, the map and the spot desappear
    Copy & paste the code below to embed this comment.
  30. What could make this kind of a map even better, would be the ability to search within the grids. I was working on a similar thing a few years back. But as the client was less interested we gave it up. Imagine me just searching for a street in a map and the particular streets gets highlighted. After google earth, there are very few things i now desire in a map. Cheers!
    Copy & paste the code below to embed this comment.
  31. It seems to me that online maps fall into two categories: cases where the map is used to organise and present some information, and cases where the map IS the information. For the former case, the technique presented in this article could no doubt be very useful. For the latter case - which will cover a lot of Google/Yahoo maps usage - it’s a lot less applicable: There’s a huge amount of visual information in the map, to which we might add a few identified points. For example, if I were using Google Maps to display the position of a particular building, it’s pointless trying to describe all the visual information that Google makes available. Just leave it alone, but add a text description of how to get to the place - if you were visually impaired and wanted to go there, where should you tell a taxi driver to take you? What bus/train would you catch? (This infirmation may be useful to sighted visitors too!)
    Copy & paste the code below to embed this comment.
  32. In the Init method, shouldn’t the line var DTs = DLs.getElementsById( ‘dt’ ); be var DTs = DLs.getElementsByTagName( ‘dt’ ); ?
    Copy & paste the code below to embed this comment.
  33. Yes that does appear to be a typo in the article. View the full source of the javascript to see the entire init method.
    Copy & paste the code below to embed this comment.
  34. Can someone create a “mapMaker.reinit()” function which will fix the tooltips after the city list has been dynamically changed? ;)
    Copy & paste the code below to embed this comment.
  35. The code below should do what you need: reinit: function(){
    mapMaker.on = false;
    var i=0;
    mapMaker.DLs = document.getElementsByTagName(‘dl’);
      while (mapMaker.DLs.length > i) {
      if (mapMaker.DLs.className == ‘map on’){
      mapMaker.DLs.className = ‘map’;
      i++;
      };
      };
    mapMaker.init();
    },
    Copy & paste the code below to embed this comment.
  36. Worth pointing out that (at least in IE<7) element.class1.class2.[...].classN is reduced down to element.classN This means that your dl.map.on rule would apply to all <dl class=‘on’> elements on the page (although you can appreciate the relative chances of this aren’t high)
    Copy & paste the code below to embed this comment.
  37. In the Init method, shouldn’t the line var DTs = DLs.getElementsById( “˜dt’ ); be var DTs = DLs.getElementsByTagName( “˜dt’ ); ?
    is it should
    http://www.replicahours.com
    Copy & paste the code below to embed this comment.
  38. Great article Seth. I thought you(and others!) might like to see what we did with our maps, http://www.travbuddy.com/world_display.php
    Copy & paste the code below to embed this comment.
  39. *@“Ismael”:http://www.alistapart.com/comments/cssmaps?page=4#32 and “Bob”:http://www.alistapart.com/comments/cssmaps?page=4#37:* thanks for catching that. We’ve made the change.
    Copy & paste the code below to embed this comment.
  40. Perfect.
    Copy & paste the code below to embed this comment.
  41. Title? (Function to show/hide all tooltips?)
    Copy & paste the code below to embed this comment.
  42. Good article, I will be experimenting with this in my nexts projects. Thanks for this great idea! Greets Maik
    Copy & paste the code below to embed this comment.
  43. Thank you very much for this article. I’m just trying to integrate a map on my site and your article is really helpful in this case.
    Copy & paste the code below to embed this comment.
  44. You will certainly recognise me as a novice ;-) but I’m trying. Also, I know my question would be better posted to some JavaScript page. But would you so kind and explain me the meaning of the double dollar sign ‘$$’ as in this.$$handleEvent(event) === false or handlers[handler.$$guid] = handler; I hope I’m not troubling you too much (as novices always do). Igor
    Copy & paste the code below to embed this comment.
  45. In Safari I’ve noticed that my CSS is loading after the tooltip images… Firefox and IE are fine… any suggestions? Should I move the CSS for the map inline? http://fearlessfilms.net/ffnew/locations.html Thanks!
    Copy & paste the code below to embed this comment.
  46. Great bit of programming!
    When I use the examples here, they work great.
    When I copy it to my own PC and run it, the IE popup blocker interferes. Any way to fix this?
    Copy & paste the code below to embed this comment.
  47. Never mind. When I publish the map, it works fine.
    You can try it at http://www.api-usa.com/api_rep_map.htm Thanks!
    Copy & paste the code below to embed this comment.
  48. Great article, thank you. Shortly after reading it, a project came up that seemed perfect for a non-API environment. We’re trying this method for a quiz, where the map & tool tips hold the answers. http://salmonnation.com/place/where_bioregion_quiz.html The backgroudn map is a dummy of course, which I’m using to help me place the x,y of the location points. I’ll just upload a new background image when done. After looking at the code for a few hours, I can’t figure out why all the points seem to be off by approx x6,y-12 pixels. Your ideas? Also, something is busted in PC IE, where the map doesn’t display at all.
    external files are http://salmonnation.com/includes/map.css and http://salmonnation.com/includes/mapevents.js
    Copy & paste the code below to embed this comment.
  49. First of all, thank you for creating this script.  I have been successful in implementing the map, but would like to substitute an onmouseout timer for the close button.  I abandoned the close image because my dd content will vary in width, and using dd width:auto; with the img float:right; makes the entire dd stretch across the screen. My goal is to have an interactive pop-up that will disappear once I stop interacting with it.  I have added an onmouseout event to the dd, but it only recognizes the first line in the dd.  I know this is a long-shot, but do you have any suggestions? Thank you in advance for any help you can offer. Paul
    Copy & paste the code below to embed this comment.
  50. Got this working in most browswers, except for Safari is still rendering as though without CSS. Any ideas? http://salmonnation.com/place/where_bioregion_quiz.html
    Copy & paste the code below to embed this comment.