My react-img-mapper implementation is getting flagged for accessibility issues – namely around labelling for the individual area elements.

WCAG spec on accessible image maps
— requires that each element have a text alternative.

Right now each rendered by react-img-mapper is hard-coded with alt="map". Even if we pass in alt inside areaProps or directly on each area object, the value doesn’t propagate to the DOM. This makes the generated image maps inaccessible, because screen readers cannot distinguish between different areas.

Describe the solution you'd like

In my previous ticket (#83) you made an update to allow the map image itself to be passed alt text which overrides the default alt="map" but that still leaves the areas unlabelled.

I’d like to be able to pass a unique label per area, i.e.:

areas={[
  {
    id: "1",
    shape: "poly",
    coords: [/* ... */],
    alt: "first area alt text",
  },
  {
    id: "2",
    shape: "poly",
    coords: [/* ... */],
    alt: "second area alt text",
  }
]}

And have the resulting DOM output:

<area shape="poly" coords="..." alt="first area alt text" />
<area shape="poly" coords="..." alt=second area alt text" />

This is a minimal change but would make the library significantly more accessible and standards-compliant.

Thanks again for your work! I’d be happy to submit a PR if you’re open to contributions.

Describe alternatives you've considered

No response

Context

No response