E-mail List Archives
Thread: keyboard accessibility of Image map
Number of posts in this thread: 7 (In chronological order)
From:
Subject: keyboard accessibility of Image map
No previous message | Next message →
Hi,
I am working on an accessible website and I would like to use image map
(i.e. use <map> element with <img>). When I step the <map> elementlinks
the focus indicator is disappearing.
Do you know any accessible solution (I think this should be JavaScript)
to highlight the active part of the image?
--
Best regards,
Zsolt Edelényi
Web accessibility in Hungary, Europe.
From: Birkir R. Gunnarsson
Date: Wed, Sep 27 2017 8:04AM
Subject: Re: keyboard accessibility of Image map
← Previous message | Next message →
So do you use <area href="#"> elements inside the <map> element?
That should acheve keyboard accessibility, and I thought the focus
outline would show up.
I haven't seen an image map lately, because they don't scale well, so
break responsive.
On 9/27/17, Edelényi Zsolt Péter < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> I am working on an accessible website and I would like to use image map
> (i.e. use <map> element with <img>). When I step the <map> elementlinks
> the focus indicator is disappearing.
>
> Do you know any accessible solution (I think this should be JavaScript)
> to highlight the active part of the image?
>
>
> --
> Best regards,
> Zsolt Edelényi
>
> Web accessibility in Hungary, Europe.
>
> > > > >
--
Work hard. Have fun. Make history.
From: Angela French
Date: Wed, Sep 27 2017 10:03AM
Subject: Re: keyboard accessibility of Image map
← Previous message | Next message →
Here is an example you may look at. Focus indicate is there, though not very noticeable, especially on mobile. Also it is responsive.
https://www.sbctc.edu/our-colleges/explore-colleges/default.aspx
Angela French
SBCTC
From: Jim Allan
Date: Wed, Sep 27 2017 7:56PM
Subject: Re: keyboard accessibility of Image map
← Previous message | Next message →
separate and apart from the focus outline,
it appears the arrangement of the area elements is in reverse order.
I would expect the tab order to start at 1.
easily fixed by rearranging the area elements,
On Wed, Sep 27, 2017 at 11:03 AM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Here is an example you may look at. Focus indicate is there, though not
> very noticeable, especially on mobile. Also it is responsive.
>
> https://www.sbctc.edu/our-colleges/explore-colleges/default.aspx
>
> Angela French
> SBCTC
>
>
From: Peter Shikli
Date: Thu, Sep 28 2017 9:17AM
Subject: Re: keyboard accessibility of Image map
← Previous message | Next message →
When tabbing through an imagemap, I sometimes think I've lost focus because the outline indicating focus is so easily lost in the image itself, all the while that keyboard focus is accessible and working.
Several utilities are available to emphasize keyboard focus location. I use the "Show Highlight Rectangle" of Microsoft's Inspect Object (64-bit UNICODE Release). Keep in mind with any of these utilities that they're an aid to finding focus, not a proof of focus. Sometimes they will show focus beyond what screen readers use, in which case such items may not be keyboard accessible.
Cheers,
Peter Shikli
vagyis Shikli Péter
From:
Subject: Re: keyboard accessibility of Image map
← Previous message | Next message →
2017. 09. 28. 17:17 keltezéssel, Peter Shikli ÃÂrta:
> When tabbing through an imagemap, I sometimes think I've lost focus because the outline indicating focus is so easily lost in the image itself, all the while that keyboard focus is accessible and working.
>
Yes. And this is not good.
> Several utilities are available to emphasize keyboard focus location.
I am looking for a Javascript (or jQuery ) library to solve this problem
in websites. I could not find any. Could you help?
--
Best regards,
Zsolt Edelényi
Web accessibility in Hungary, Europe.
From: Peter Shikli
Date: Fri, Sep 29 2017 7:41AM
Subject: Re: keyboard accessibility of Image map
← Previous message | No next message
Valahogy levágták eredeti válaszomat ahol feleltem kérdésére. Ismételem:
When tabbing through an imagemap, I sometimes think I've lost focus
because the outline indicating focus is so easily lost in the image
itself, all the while that keyboard focus is accessible and working.
Several utilities are available to emphasize keyboard focus location. I
use the "Show Highlight Rectangle" of Microsoft's Inspect Object (64-bit
UNICODE Release). Keep in mind with any of these utilities that they're
an aid to finding focus, not a proof of focus. Sometimes they will show
focus beyond what screen readers use, in which case such items may not
be keyboard accessible.
Edelényi Zsolt Péter wrote on 9/28/2017 8:09 PM:
>
>
> 2017. 09. 28. 17:17 keltezéssel, Peter Shikli ÃÂrta:
>> When tabbing through an imagemap, I sometimes think I've lost focus
>> because the outline indicating focus is so easily lost in the image
>> itself, all the while that keyboard focus is accessible and working.
> Yes. And this is not good.
>
>>  Several utilities are available to emphasize keyboard focus location.
> I am looking for a Javascript (or jQuery ) library to solve this
> problem in websites. I could not find any. Could you help?
>