L.divIcon y atributo aria-label

Question

Tengo tres tipos de capa y para cada capa un marcador diferente, que he estilizado en CSS. El problema ahora es, que si alguien usa VoiceOver o algo así, está leyendo el 'html'. En mi caso, sólo la primera letra. ¿Es posible añadir el atributo ARIA-label a mi marcador, para que VoiceOver lea feature.properties.name y no el 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)
                })  })    }

Me he cargado un poco en el CSS:

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

    }

Y lo usé así en el html:

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

No es la etiqueta ARIA, sino que VoiceOver lee el nombre. Pero, ¿hay una manera más elegante con ARIA?

Answer 1

Desde html opción de L.divIcon puede ser cualquier código/elemento html, puede envolver su contenido deseado con <div> con la etiqueta requerida aria-label atributo:

 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)
    })
  })
}