Missing alt text and ARIA labels on map markers in interactive maps

[ashutosh-engineer]

Problem

While using the interactive map feature in Public Lab’s website (https://publiclab.org/map), I noticed that the map markers currently do not have any alt text or aria-labels associated with them.

This makes the application inaccessible to screen readers or visually impaired users.

---

Steps to Reproduce

1. Open https://publiclab.org/map
2. Use a screen reader (like NVDA, JAWS, or VoiceOver) or inspect the DOM manually
3. Try to navigate through map markers
4. Notice that there are no descriptive labels on the marker elements

---

Expected Behavior

Each marker element should include:

• An aria-label with a short description (e.g., "Event marker: Oil Spill in Gulf")
• Or at least an alt attribute if an <img> or equivalent is used

---

Suggested Fix

• Locate the component responsible for rendering markers (likely in the Leaflet.js or custom JS code)
• Add accessibility attributes to all interactive elements:

  <div role="button" aria-label="Map marker: Title of the event">...</div>

[riyap03]

Hi! I’m Riya, a beginner in open source and web development. I’d love to work on this issue and learn more about accessibility and Leaflet. Could you please assign it to me? 😊