1

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?

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)
    })
  })
}
| improve this answer | |
  • I'm embarrassed. This was too easy. Thank you. – Isabella Jun 27 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.