WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Image maps

for

Number of posts in this thread: 6 (In chronological order)

From: Barry Hill
Date: Wed, Jan 22 2020 4:58AM
Subject: Image maps
No previous message | Next message →

Hi all



I've been asked what to do about screen reader accessibility for an image of
a map of the UK that gives more information when areas of the map are
clicked on. Tabbing and cursoring do not pick up anything on the map.



This is from W3C:



"For non-text content that is a control or accepts user input, such as
images used as submit buttons, image maps or complex animations, a name is
provided to describe the purpose of the non-text content so that the person
at least knows what the non-text content is and why it is there."



So, it seems that it is ok that it is not accessible as long as it has a
label to say what I, as a blind screen reader user, am missing out on. Is
this correct for this map? I wonder if it might be as good to null text the
whole thing.



Thanks in anticipation.



Cheers



Barry

From: Patrick H. Lauke
Date: Wed, Jan 22 2020 5:03AM
Subject: Re: Image maps
← Previous message | Next message →

On 22/01/2020 11:58, Barry Hill wrote:
> Hi all
>
>
>
> I've been asked what to do about screen reader accessibility for an image of
> a map of the UK that gives more information when areas of the map are
> clicked on. Tabbing and cursoring do not pick up anything on the map.
>
>
>
> This is from W3C:
>
>
>
> "For non-text content that is a control or accepts user input, such as
> images used as submit buttons, image maps or complex animations, a name is
> provided to describe the purpose of the non-text content so that the person
> at least knows what the non-text content is and why it is there."
>
>
>
> So, it seems that it is ok that it is not accessible as long as it has a
> label to say what I, as a blind screen reader user, am missing out on. Is
> this correct for this map? I wonder if it might be as good to null text the
> whole thing.

No, you misunderstand. The quoted text refers to the main image itself,
and that your text alternative for it at least knows in very broad
general terms what it is (in your case, "Map of the UK"). The actual
functionality of the map itself must still be made accessible (either
directly, or provide an alternative such as a table or just a flat
separate page that lists all areas of the UK and provides that
information you'd get when clicking on each bit).

In short, the text you quote does not absolve you from making this map
accessible.

P

--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Barry Hill
Date: Wed, Jan 22 2020 5:26AM
Subject: Re: Image maps
← Previous message | Next message →

Thanks, Patrick. I did think that it was unusual to simply ignore the
accessibility. The map is for mobile phone coverage down to individual
postcodes, so I can't see that the map itself can be made practically
accessible. However, they do have a postcode search facility that does the
same thing, so I told them that this would be fine, alternative means and
all that. So, with this alternative in mind, what do they do about the map?

Cheers

Barry




-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
Patrick H. Lauke
Sent: 22 January 2020 12:03 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Image maps

On 22/01/2020 11:58, Barry Hill wrote:
> Hi all
>
>
>
> I've been asked what to do about screen reader accessibility for an
> image of a map of the UK that gives more information when areas of the
> map are clicked on. Tabbing and cursoring do not pick up anything on the
map.
>
>
>
> This is from W3C:
>
>
>
> "For non-text content that is a control or accepts user input, such as
> images used as submit buttons, image maps or complex animations, a
> name is provided to describe the purpose of the non-text content so
> that the person at least knows what the non-text content is and why it is
there."
>
>
>
> So, it seems that it is ok that it is not accessible as long as it has
> a label to say what I, as a blind screen reader user, am missing out
> on. Is this correct for this map? I wonder if it might be as good to
> null text the whole thing.

No, you misunderstand. The quoted text refers to the main image itself, and
that your text alternative for it at least knows in very broad general terms
what it is (in your case, "Map of the UK"). The actual functionality of the
map itself must still be made accessible (either directly, or provide an
alternative such as a table or just a flat separate page that lists all
areas of the UK and provides that information you'd get when clicking on
each bit).

In short, the text you quote does not absolve you from making this map
accessible.

P

--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke
http://webaim.org/discussion/archives

From: Lucy GRECO
Date: Thu, Jan 16 2020 8:04PM
Subject: Re: Image maps
← Previous message | Next message →

hello: check out the highcharts map tool it does an excellent job of
making the map accessible
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces



On Wed, Jan 22, 2020 at 4:26 AM Barry Hill < = EMAIL ADDRESS REMOVED = > wrote:

> Thanks, Patrick. I did think that it was unusual to simply ignore the
> accessibility. The map is for mobile phone coverage down to individual
> postcodes, so I can't see that the map itself can be made practically
> accessible. However, they do have a postcode search facility that does the
> same thing, so I told them that this would be fine, alternative means and
> all that. So, with this alternative in mind, what do they do about the
> map?
>
> Cheers
>
> Barry
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Patrick H. Lauke
> Sent: 22 January 2020 12:03 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Image maps
>
> On 22/01/2020 11:58, Barry Hill wrote:
> > Hi all
> >
> >
> >
> > I've been asked what to do about screen reader accessibility for an
> > image of a map of the UK that gives more information when areas of the
> > map are clicked on. Tabbing and cursoring do not pick up anything on the
> map.
> >
> >
> >
> > This is from W3C:
> >
> >
> >
> > "For non-text content that is a control or accepts user input, such as
> > images used as submit buttons, image maps or complex animations, a
> > name is provided to describe the purpose of the non-text content so
> > that the person at least knows what the non-text content is and why it is
> there."
> >
> >
> >
> > So, it seems that it is ok that it is not accessible as long as it has
> > a label to say what I, as a blind screen reader user, am missing out
> > on. Is this correct for this map? I wonder if it might be as good to
> > null text the whole thing.
>
> No, you misunderstand. The quoted text refers to the main image itself, and
> that your text alternative for it at least knows in very broad general
> terms
> what it is (in your case, "Map of the UK"). The actual functionality of the
> map itself must still be made accessible (either directly, or provide an
> alternative such as a table or just a flat separate page that lists all
> areas of the UK and provides that information you'd get when clicking on
> each bit).
>
> In short, the text you quote does not absolve you from making this map
> accessible.
>
> P
>
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > at
> http://webaim.org/discussion/archives
> >
> > > > >

From: Guy Hickling
Date: Wed, Jan 22 2020 5:28PM
Subject: Re: Image maps
← Previous message | Next message →

>> So, with this alternative in mind, what do they do about the map?

You have to look at all the WCAG success criteria and consider how each one
applies to the situation in your website. Specifically there is SC2.1.1
which says "All functionality of the content is operable through a keyboard
interface...." - it's written primarily for keyboard-only users (it usually
helps screen reader users as well, though maybe not so much here).

The functionality of your map allows the user to click anywhere on the map
and get the mobile coverage for that postcode. This should be quite easy to
replicate from the keyboard. Just create a cross-hair pointer that can be
moved using the arrow keys. That provides keyboard users with the much of
the same functionality as mouse users.

But I say "much of" because there is more. Presumably the user, having
clicked on one place (say their home street), can then click on surrounding
streets to easily find coverage for the whole area - or does the map itself
show data for the whole area at that point. Either way, clicking over a
whole area, not just one postcode, is very easy.

If you consider this, that's what people will want. I know this because I
have just bought a mobile phone for my son, and we checked the coverage
maps of the supplier we were considering. We checked our home postcode
(which we knew) and his school - both were good reception. But then looking
at the map at all the streets he traverses on the way to and from school
(obviously we didn't know any of the postcodes for them so that would have
been extremely difficult using postcode retrieval) we found reception was
poor most of the way. Looking further around the map, we discovered
reception was poor across much of our small town. So we went with a
different supplier. The point being that we needed the map for that. We
could not have done that kind of searching by looking up and typing in
dozens and dozens of postcodes.

This illustrates how what might, at first glance, seem to be the
"functionality" of an operation is not necessarily all there is to it! We
have to consider how the users can use it in actual practice. Mouse users,
that is. But we have to ask users who actually use that kind of
functionality in real life to get a true picture!

Then we have to consider how to give the nearest possible thing to
keyboard-only users. That's the arrow keys in this case, so 2.1.1
effectively says you must do that.

Then we have to consider how to give the same ability to screen reader
users, as nearly as possible for blind people. Ok, it's a visual map, so
this is going to be more difficult. But you may be able to come up with
something better than just allowing them to type in one postcode they know.
Perhaps they could type in the name of a town? or a street? - people know
street names much better than postcodes. It bears some thought at least.

(NB: The keyboard arrows above should not need a lot of extra scripting, I
think. When the user presses the Enter key, the scripting gets the
coordinates of the cross, then it would call the same function that is
called on mouse click to retrieve the information. You might need to
convert the cross-hair coordinates to the mouse coordinate system first if
you've used a different measuring system, but that should hopefully be the
only extra scripting needed.)

Regards,
Guy Hickling
Accessibility Consultant

From: Mallory
Date: Thu, Jan 23 2020 4:40AM
Subject: Re: Image maps
← Previous message | No next message

It would be ideal if at least the clickable areas could be keyboarded, and if the map would still work if zoomed.

That doesn't deal with totally-blind screen reader users but it does help a LOT of people with other disabilities (motor, low-vision).

That means named controls that are input-agnostic and an ability for the map to ensure text and borders on it can remain sharp (so using vectors. If using <canvas> then it would need to re-render new glyphs to keep them sharp, rather than just zooming the original image's text).

Then if it's difficult to use if you're totally-blind with a screen reader, your other options need to work well enough that a user can be like "okay, I'll search post codes" or find the table listing postcodes and do an in-browser search, etc.

This allows maximum choice for users.

cheers,
_mallory

On Fri, Jan 17, 2020, at 4:04 AM, Lucy GRECO wrote:
> hello: check out the highcharts map tool it does an excellent job of
> making the map accessible
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
>
>
>
> On Wed, Jan 22, 2020 at 4:26 AM Barry Hill < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Thanks, Patrick. I did think that it was unusual to simply ignore the
> > accessibility. The map is for mobile phone coverage down to individual
> > postcodes, so I can't see that the map itself can be made practically
> > accessible. However, they do have a postcode search facility that does the
> > same thing, so I told them that this would be fine, alternative means and
> > all that. So, with this alternative in mind, what do they do about the
> > map?
> >
> > Cheers
> >
> > Barry
> >
> >
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> > Patrick H. Lauke
> > Sent: 22 January 2020 12:03 PM
> > To: = EMAIL ADDRESS REMOVED =
> > Subject: Re: [WebAIM] Image maps
> >
> > On 22/01/2020 11:58, Barry Hill wrote:
> > > Hi all
> > >
> > >
> > >
> > > I've been asked what to do about screen reader accessibility for an
> > > image of a map of the UK that gives more information when areas of the
> > > map are clicked on. Tabbing and cursoring do not pick up anything on the
> > map.
> > >
> > >
> > >
> > > This is from W3C:
> > >
> > >
> > >
> > > "For non-text content that is a control or accepts user input, such as
> > > images used as submit buttons, image maps or complex animations, a
> > > name is provided to describe the purpose of the non-text content so
> > > that the person at least knows what the non-text content is and why it is
> > there."
> > >
> > >
> > >
> > > So, it seems that it is ok that it is not accessible as long as it has
> > > a label to say what I, as a blind screen reader user, am missing out
> > > on. Is this correct for this map? I wonder if it might be as good to
> > > null text the whole thing.
> >
> > No, you misunderstand. The quoted text refers to the main image itself, and
> > that your text alternative for it at least knows in very broad general
> > terms
> > what it is (in your case, "Map of the UK"). The actual functionality of the
> > map itself must still be made accessible (either directly, or provide an
> > alternative such as a table or just a flat separate page that lists all
> > areas of the UK and provides that information you'd get when clicking on
> > each bit).
> >
> > In short, the text you quote does not absolve you from making this map
> > accessible.
> >
> > P
> >
> > --
> > Patrick H. Lauke
> >
> > https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> > https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> > twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > > > at
> > http://webaim.org/discussion/archives
> > > >
> > > > > > > > > >
> > > > >