L.divIcon and aria-label attribute

Question

I have three type of layer and for each layer a different marker, which I styled in CSS. The problem now is, that if someone uses VoiceOver or something like this, it's reading the 'html'. In my case, just the first letter. Is it somehow possible to add the ARIA-label attribute to my marker, that VoiceOver will read feature.properties.name and not the html?

     pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                icon: L.divIcon({
                    className: feature.properties.type,
                    html: feature.properties.type[0].toUpperCase(),
                    iconSize: L.point(50, 50)
                })  })    }

I butchered a bit in CSS:

 divm {
        color:transparent;
        font-size:0px;
       
    }

And used it like this in the html:

html: feature.properties.type[0].toUpperCase() + '<divm>' + feature.properties.name + '</divm>',

It's not the ARIA label, but VoiceOver is reading the name. But is there a more elegant way with ARIA?

Answer 1

Since html option of L.divIcon can be any html code/element, you can wrap your desired content with <div> tag with required aria-label attribute:

 pointToLayer: function (feature, latlng) {
  return L.marker(latlng, {
    icon: L.divIcon({
      className: feature.properties.type,
      html: '<div aria-label="' + feature.properties.name + '">' + feature.properties.type[0].toUpperCase() + '</div>',
      iconSize: L.point(50, 50)
    })
  })
}