WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: keyboard accessibility of Image map

for

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

From:
Date: Wed, Sep 27 2017 6:24AM
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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, September 27, 2017 7:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] keyboard accessibility of Image map

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.
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: Wednesday, September 27, 2017 7:05 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] keyboard accessibility of Image map
>
> 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.
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > at http://webaim.org/discussion/archives
> > > > > >



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

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:
Date: Thu, Sep 28 2017 9:09PM
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?
>