» Accessible maps / Reply to comment

Reply to comment


Accessible maps

Posted on 23 April 2006 - 16:04

A List Apart has an interesting article explaining how to build web pages containing highly graphical maps while still being accessible to the visually impaired. Lots of CSS trickery, but the result is there and is nice, when Google Maps or Yahoo! Maps are definitely not accessible.

Now have a look at the latest Dojo goodies: GoogleMap and YahooMap widgets! The good thing is not in the page (a classical mashup) but in the source. The map is just a 3-colums table with latitude, longitude and text, and an empty <div> with a dojoType attribute that starts the magic:
<div dojoType="googlemap" id="mapTest" datasrc="mapData"></div>
<table id="mapData">
  <thead><tr><th>Lat</th><th>Long</th><th>Icon</th><th>Description</th></tr></thead>
  <tbody>
    <tr>
      <td>37.4419</td><td>-122.14193</td><td></td>
      <td><div>This is the first place on the map.</td>
    </tr>
    <tr>
      <td>37.42189</td><td>-122.084692</td><td></td>
      <td><div>This is the second place on the map.</td>
    </tr>
    <tr>
      <td>37.3318</td><td>-122.029009</td><td></td>
      <td><div>This is the third place on the map.</td>
    </tr>
  </tbody>
</table>
Easy, accessible, and fully interactive. Dojo rocks!

Reply

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
Please answer this question to show that you're not a stupid spam robot.
6 + 5 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.