<map> element has been deployed and in use in browsers since the mid-90's. It was used to provide visually appealing yet accessible home pages, by giving the Web developer the ability to design links as invisible yet interactive polygonal areas on top of one or more images. Use of this facility became known as "client side image maps", and was often used to provide site navigation links.
In recent years, client side image maps have fallen out of wide use, due to improvements in other areas of the Web platform. However, some sites still use image maps to provide a simple, accessible, but simultaneously visual user experience.
The web-map custom element suite provides a set of proof-of-concept "customized built-in" elements based on
Note that because not all modern Web browsers implement HTML's customized built-in elements, it is not recommended to use this proof-of-concept on a public Web site, as end-user confusion may be the result.
<map> as a customized built-in element is not accessible to screen reader users in some browsers, due to a Chromium bug.
The following markup may work on Chrome and Firefox, although it may take some fine tuning:
To experiment with the
map-area custom elements, you should link your
<script type="module" src="web-map.js"></script> to the
web-map.js file that is built by the web-map custom element suite build process.
In theory, if you take steps to provide the fallback markup, a normal (progressive) Web map experience will be had by most users, while those using an older browser or perhaps even Safari may get the "fallback" client side image map experience.