WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible content when showing a map

for

From: Jonathan Metz
Date: Jun 4, 2013 9:19AM

Howdy,

I am NOT a web designer, nor do I pretend to be. But I could really use some advice on the best way to make a suggestion on providing accessible content when using a map.

I was watching a screen share of a web site and the client showed a page with a map of the United States where each state had clickable real text (as acronyms) that changed content down below it. I can’t remember exactly what the map was referencing, but it was basically something where the content was saying the number of the states that had offices for something versus the ones that didn’t. They were complaining that they couldn’t figure out a way to share the content in an accessible manner.

To the best of my understanding, all the content for the map exists on the same page and is just using css and query to show and hide content. These people have never heard of ARIA (nor do I really understand how to implement it yet), so I didn’t want to confuse them with that.

My suggestion was to use WebAIM’s invisible content to skip to more accessible content in the CSS that jumps the user around the map to a list of states that had the various offices and a list of the ones that didn’t. You can find more about that here: http://webaim.org/techniques/css/invisiblecontent/.

I was trying to find the easiest and cheapest solution (as usual, client doesn’t have any money, same old story). My thinking was that they only need to find an accessible way to show content, as providing a map was only one of many ways to show content (as in, they didn’t need to, but it looked prettier).

My question is, was this an okay recommendation? Is there a better, easier, cheaper way to do this?

Thanks in advance for your mad web skills.

Jonathan Metz