WebAIM - Web Accessibility In Mind

E-mail List Archives

Focus indicator on image maps

for

From: Wing Kuet
Date: Jan 16, 2020 12:38AM

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> >