WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible content when showing a map

for

From: Elle
Date: Jun 5, 2013 7:17PM

For another option to consider, please feel free to take a look at the SVG
accessible map example located here:
http://examples.simplyaccessible.com/svg-maps/. It's responsive, and
therefore mobile-friendly, and it's built via progressive enhancement, and
therefore supports non-SVG scenarios. The dropdown menu was placed higher
in the source order to provide faster access for non-sighted keyboard
users, users without SVG capabilities, and mobile users, and the tab order
for the visual map was designed specifically with sighted keyboard users in
mind (tabbing via region instead of alphabetical). And finally, the New
England states have an additional area highlighted (the column adjacent to
the states) to aid low-vision users in understanding which states have
focus.


Hope that helps,
Elle


If you want to build a ship, don't drum up the people to gather wood,
divide the work, and give orders. Instead, teach them to yearn for the vast
and endless sea.
- Antoine De Saint-Exupéry, The Little Prince


On Wed, Jun 5, 2013 at 2:23 PM, Jim Allan < <EMAIL REMOVED> > wrote:

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