Cartography + Accessibility

Over the last several months, I had an incredible opportunity to collaborate with Alison Link and Mitch Schaps on some cartographic accessibility best practices and considerations.

Based on our joint presentation, and some discussions at NACIS 2015, I wanted to compile my own detailed list of accessibility considerations, and pose the following questions to the cartographic community (you can comment below, or hit me up on the Twitters):

  • Do you agree with our best practices?
  • What did we miss?
  • Are there any innovations you’ve done in your work? If so, what are they?

Summary

Our presentation at NACIS, best practices and considerations, and this blog post were implemented and written to serve as a tool, and to initiate discussions within the cartographic community. These considerations are not the catch-all answer to cartographic/web accessibility. In our work together we discovered the best starting point is to initiate discussions on accessibility and see where they lead you.

(Some) Accessible Cartographic Considerations

Maps are extremely difficult to make accessible, as their primary intent is to serve as a visual product. IMHO, each visual product has to be evaluated on a case-by-case basis as the intent and audience changes. The use case will change the delivery of accessibility, and in some cases, not all of the elements can be made completely accessible.

Some considerations I have implemented in the last year include:

  1. Provide an accompanying table of data with a map/visual. A table will provide context, or further support of your map/visual.

For example:

accompanying-table
Accompanying table
  1. Ensure tabular data can be accessed by a screen reader. This step requires a small amount of effort on your part, but will be extremely helpful to those who rely on screen readers. To do so, add the scope attribute and note whether the item is a column (col) or row (row) in your HTML content.

For example:

<table>
     <caption>Population in the United States</caption>
     <tr>
          <th scope="col">State</th>
          <th scope="col">2010</th>
          <th scope="col">2000</th>
     </tr>

     <tr>
          <th scope="row">Alabama</th>
          <td>4,779,736</td>
          <td>4,447,100</td>
     </tr>

     <tr>
          <th scope="row">Alaska</th>
          <td>710,231</td>
          <td>626,932</td>
     </tr>
</table>

Producing the following content on your page:

Population in the United States
State 2010 2000
Alabama 4,779,736 4,447,100
Alaska 710,231 626,932
  1. If possible, use colorblind safe colors. Using these color schemes help all audiences, and make it easier to distinguish between elements in your map. Some resources to “add to your toolbox” to help verify your maps are cartographically-sound include:
  1. Enable a ‘skip to data’ link, which is similar to the ‘skip to content’ link. The ‘skip to’ allows screen readers to skip to the content that is most important to them. In most cases, the average user will not see this functionality (unless they tab through the website).

For example:
skip-to-table Skip to table

  1. Check keyboard accessibility ensuring users/visitors can tab through the site. To test your website, (re)load your site and tab through it to see what order is highlighted along the way. The order you see with “the tab test” is very likely what a screen reader will experience. While testing ask yourself, “Can I navigate through the page?” and “Does the tab order make sense with the content I’m displaying?”
  1. Don’t make people hover to find things. The click, focus, and hover functions should have relatively the same functionality throughout an application. If a user hovers over text, they should have a similar experience if they tab and/or click on the element. P.S. This really helps with mobile experiences, too! 🙂

For example:

click-focus-hover-example
Similar functionality example (click, focus, and hover)

:hover, :focus {
/* CSS goes here */
}

$('#target').on('click hover', function () {
// JavaScript goes here
});

  1. Ensure all other web accessibility requirements are met. A good resource/tool to verify accessibility requirements are met on a website is WAVE (Chrome extension), developed by WebAIM, which will check a site to see if it meets web accessibility standards.
Advertisements

One thought on “Cartography + Accessibility”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s