Adding accessibility to a Leaflet map?

I'd like to make sure maps I create with the leaflet package have alt text that could be read by screen readers. Essentially add alt text to the whole leaflet map the same way you can for static figures.

I did see there is a way to add alt text to markers but I want to have alt text for the whole map. : https://leafletjs.com/examples/accessibility/#markers-must-be-labelled (I've had trouble getting this to work in R to but using markers is not my aim)

Some pseudo code:

library(leaflet)
leaflet(options = leafletOptions(alt = "This is Spain.")) %>%
  addTiles() %>%
  setView(lng = -3.7, lat = 40.4, zoom = 5)

I am also using a quarto revealjs presentation for this, in case there may be some alternative workaround there.

This seems like it should be simple but for the life of me I can't figure it out.

I've tried:

the fig.alt options on the quarto code chunk,
the "alt" leafletOptions as above, and
attempting to set a custom html attribute using attr.source= 'alt = "This alt text." on the quarto code chunk.

Solution

This post suggests setting the area-label inside the HTML-DOM will be picked up by screenreaders. And indeed, when I installed Nv-Access and navigated to the leaflet page created by the following code, it reads out area-label when hovering over the map. This says further "(Note: it's necessary to include role="img" on the div in order to conform to the requirement that aria-roledescription is only used on elements with an implicit or explicit ARIA role (div elements do not have an implicit ARIA role, so one is provided explicitly using the role attribute).". this suggests that the alt attribute only works for images: <img> but a leaflet map is an interactive widget which does load images but not in the real sense of the tag but as tiles and resides within a container (div). I guess you render your quarto to HTML, so this code should work for your usecase.

library(leaflet)

leaflet() %>%
  addTiles() %>%
  setView(lng = -3.7, lat = 40.4, zoom = 5) %>%
  htmlwidgets::onRender("
    function(el, x) {
      el.setAttribute('role', 'img');
      el.setAttribute('aria-label', 'Interactive Leaflet map with Spain in the center.');
    }
  ")