E-mail List Archives
Thread: Accessible content when showing a map
Number of posts in this thread: 5 (In chronological order)
From: Jonathan Metz
Date: Tue, Jun 04 2013 9:19AM
Subject: Accessible content when showing a map
No previous message | Next message →
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 cant 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 didnt. They were complaining that they couldnt 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 didnt want to confuse them with that.
My suggestion was to use WebAIMs 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 didnt. 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 doesnt 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 didnt 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
From: Chagnon | PubCom
Date: Tue, Jun 04 2013 1:31PM
Subject: Re: Accessible content when showing a map
← Previous message | Next message →
Jonathan, would a table be appropriate for this state information?
Sometimes when I've had to make complex graphical data accessible the
easiest route for both us developers and the end users is to put the data
into a logical row/column format right below the graphic. If the graphic is
read before the table in the reading order/tag tree, we put Alt-text on the
graphic that references the table, such as Alt="Map shows A vs. B by state
and the numerical data is listed in the table that follows."
-Bevi Chagnon
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
www.PubCom.com - Trainers, Consultants, Designers, Developers.
Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
Accessibility.
New schedule for classes and workshops coming in 2013.
From: Jonathan Metz
Date: Tue, Jun 04 2013 1:45PM
Subject: Re: Accessible content when showing a map
← Previous message | Next message →
Hi Bevi,
A table might make a more logical choice than a list, since it¹s a
comparison situation. I don¹t think they want to change the way the map
works, just to provide accessible content in addition to the map. The
problem is, I don¹t think the map is a graphic, or at least not totally.
The background might be an image, but the text was selectable and overlaid
on top of the map graphic.
Thanks for the response!
Jonathan
Halfaker and Associates, LLC
Jonathan Metz
Graphics Designer
= EMAIL ADDRESS REMOVED = | www.halfaker.com <http://www.halfaker.com/>;
On 6/4/13 3:31 PM, "Chagnon | PubCom" < = EMAIL ADDRESS REMOVED = > wrote:
>Jonathan, would a table be appropriate for this state information?
>Sometimes when I've had to make complex graphical data accessible the
>easiest route for both us developers and the end users is to put the data
>into a logical row/column format right below the graphic. If the graphic
>is
>read before the table in the reading order/tag tree, we put Alt-text on
>the
>graphic that references the table, such as Alt="Map shows A vs. B by state
>and the numerical data is listed in the table that follows."
>
>-Bevi Chagnon
>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>-
>- - - - - - - - - - - - - - -
>www.PubCom.com - Trainers, Consultants, Designers, Developers.
>Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
>Accessibility.
>New schedule for classes and workshops coming in 2013.
>
>
From: Jim Allan
Date: Wed, Jun 05 2013 12:23PM
Subject: Re: Accessible content when showing a map
← Previous message | Next message →
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 ADDRESS 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 cant 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 didnt. They were complaining that they couldnt
> 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 didnt want to confuse them with that.
>
> My suggestion was to use WebAIMs 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 didnt.
> 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
> doesnt 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 didnt 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
From: Elle
Date: Wed, Jun 05 2013 7:17PM
Subject: Re: Accessible content when showing a map
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 cant 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 didnt. They were complaining that they couldnt
> > 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 didnt want to confuse them with that.
> >
> > My suggestion was to use WebAIMs 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
> didnt.
> > 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
> > doesnt 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 didnt 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
> > > >