How to add aria-labels to pins for accessibility?

Help and support
1

I created a map using OpenStreetMap and am embedding it on my website (as an iframe). It is a simple map with one pin. In OpenStreetMap, I’ve named the pin. However, when I look at the code, there is no label for the pin. Here is what the code (that it generated) looks like:

<div data-feature="0JNtp" class="leaflet-marker-icon umap-drop-icon readonly leaflet-zoom-animated leaflet-interactive" tabindex="0" role="button" style="margin-left: -16px; margin-top: -42px; width: 12px; height: 12px; transform: translate3d(565px, 153px, 0px); z-index: 0;">

However, I would like it to generate labels for accessibility (aria-label and aria-labelledby), something like this:

<div 
  data-feature="0JNtp"
  class="leaflet-marker-icon umap-drop-icon readonly leaflet-zoom-animated leaflet-interactive"
  tabindex="0"
  role="button"
  aria-label="Downtown Library, 123 Main Street"
  style="margin-left: -16px; margin-top: -42px; width: 12px; height: 12px; transform: translate3d(565px, 153px, 0px); z-index: 0;"
>

Any idea how I can accomplish this? Thank you in advance

2

Hello.

I think that fastest way nowadays to get help with your issue is to ask any AI for help. I dropped you question to Gemini and it says that you have two ways to deal with it.

If you used the “Share” button on OpenStreetMap.org, the iframe code generated is usually just a view of the map tiles with a static marker. It doesn’t include a robust data layer for screen readers.

To get the code structure you mentioned earlier (with data-feature and aria-label), most developers use uMap - Online map creator , which is a specialized tool built on top of OpenStreetMap specifically for creating embeddable maps with custom markers and labels.

The second way is to add this text to the alt attribute of the marker if you add it to the map using leaflet in Javascript.

3

Can you simply modify generated code and use modified code in place where you will use it?

4

I tried that but the generated code relies on about 20+ javascript files that are off site, so I’d have to download all of those, and I even tried to do that but even those javascript files include references to other javascript files inside of them. I tried just referencing them on the openstreetmap url, but I got an error about the cross origin (basically a security feature where the JS file won’t load for a site that’s not the same server). I wonder if there’s a way to download the map and all associated javascript etc but I can’t find it.

5

I’m not exactly sure what is not working for you, because I’ve no idea what your website is trying to do. Most of the maps on OpenStreetMap.org currently use Leaflet to display things. The very first example on the Leaflet site is the code for a map with a named pin, which sounds like exactly what you want. See also switch2osm (but to be honest, Leaflet’s own documentation is excellent).