WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible content when showing a map

for

From: Jim Allan
Date: Jun 5, 2013 12:23PM

Johnathan,
perhaps the good old image map might work for this...
each state gets an alt attribute (with appropriate information - state
name, if they have an office...something short),
each state shows up in a links list for screen readers,
each state is a link and tabable,
and you get a bigger click area than a text abbreviation

then, when you click (hit enter) on a state the JS does its DOM magic and
the new information appears, they could also move the focus to the new
information.

Jim


On Tue, Jun 4, 2013 at 10:19 AM, Jonathan Metz
< <EMAIL REMOVED> >wrote:

> 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
>
> > > >



--
Jim Allan, Accessibility Coordinator & Webmaster
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964