WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus indicator on image maps

for

From: Max Starkenburg
Date: Jan 16, 2020 11:37AM

I had not looked at this before, but I tried playing around and couldn't
get anything to work in Firefox either. It seems that the "map" element,
while kind of displayed, is just hanging out dimensionless in the bottom
corner, while the "area" elements are set by Firefox to "display:none", and
my attempts to override that in the Inspector were unsuccessful (despite
using "!important"). Looks like other folks have asked about this in
StackOverflow
<https://stackoverflow.com/questions/5026421/apply-css-to-area-map>, where
the answers seem to indicate that it's not possible with CSS alone, and
workarounds suggest using SVG instead, or some jQuery plugins/workarounds
that seem to use the area's coordinates to recreate hover effects (the Map
Hilight one seems to do focus as well).

Max
--
Maxwell M. Starkenburg
<EMAIL REMOVED>
https://maxwell.fyi


On Thu, Jan 16, 2020 at 2:38 AM Wing Kuet < <EMAIL REMOVED> >
wrote:

> Does anyone have a view of creating custom focus indicators on image maps?
> I am testing a website built by one of our clients and am having difficulty
> recommending on how it can be fixed. The problem is that the browser
> default focus indicator is used but it does not have sufficient contrast.
>
> I have tried styling the focus indicator but the Firefox browser does not
> apply the styles. However, in the Chrome browser there is a partial styling
> that occurs. The custom colour is applied but the custom width or the
> custom dotted or dashed style does not get applied.
>
> I am using image map example found at w3schools.com (
> https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2) as
> reference and have attempted to created a custom outline for each area
> element. e.g. outline: 3px dashed #FF0000 for the element.style selector.
>
> I have looked at the HTML 5 specification and did not manage to find
> anything relevant. Does anyone know of any other specification that could
> shed some light into this matter?
>
> Regards,
>
> Wing Kuet
> Accessibility Consultant & Software Tester
> Test Partners Ltd
> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>
> > > > >