Accessible maps

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!