How to make this image hotspot map more accessible?

Question

I am trying to create a "hotspot" map, which is an HTML image, with buttons absolutely positioned over top of the image.

<div class="hotspot-map-container">
   <img src="..." alt="..">
   <button aria-label='buttonpurpose' class='map-pulsing-btn'></button>
   <button aria-label='buttonpurpose' class='map-pulsing-btn'></button>
   <button aria-label='buttonpurpose' class='map-pulsing-btn'></button>
   <button aria-label='buttonpurpose' class='map-pulsing-btn'></button>
   <button aria-label='buttonpurpose' class='map-pulsing-btn'></button>
</div>

I am not sure how to look at this from an accessibility standpoint though. Are there any aria attributes I should be considered for this structure of HTML? Also, should I have some kind of skip link at the top in case the user doesn't want to sift through all the links (on a screen reader). I also want to keep the context that these buttons are "within" the image for a screen reader if that is in any way possible.

Answer 1

You could use the <button> element but I would recommend you use an <img> with a <map> and <area> elements first.

<area> elements are essentially links, and since links take you to a new page, it might not be the behavior you want since you originally used buttons. But you could override the behavior of the link and make it perform an action rather than behave like a link.

If an <area> doesn't have an href attribute, then it behaves a little differently on different browsers. Firefox still makes the <area> element a tab stop but the screen reader doesn't announce that it's a link. Chrome does not make the <area> a tab stop if it doesn't have an href attribute. If all your <area> elements will have an href, then it's pretty accessible.

The <button> element is also very accessible. If the button doesn't have visible text, then you'd need an aria-label like you suggested in your example.

But in general, the concept you have is good and will be accessible.