Problem/Motivation

The Leaflet map renders map tiles and the default marker shadow as <img> elements without an alt attribute. Images without an alt attribute fail Success Criteria in accessibility tests and are flagged by automated accessibility tools such as the Portuguese AMA AccessMonitor.

Steps to reproduce

  1. Add a Leaflet map to a page (e.g. via a field formatter or the Leaflet Views style) with at least one marker.
  2. Load the page and inspect the rendered map with the browser developer tools.
  3. Observe that the tile images (.leaflet-tile) and the marker shadow image (.leaflet-marker-shadow) have no alt attribute.

Proposed resolution

In js/leaflet.drupal.js, set a translatable alt value on these images:

  • Patch L.Marker.prototype._initIcon so that, after the icon is initialised, the marker shadow image receives an alt value when it does not already have one.
  • Wrap the tile layer's createTile method so that each generated tile image receives an alt value.

Both strings use Drupal.t() so they remain translatable.

Remaining tasks

  • Review the patch.
  • Decide whether map tiles should carry descriptive alt text ("Map tile") or an empty alt="" marking them as decorative. Both satisfy the "missing alt attribute" check, but empty alt avoids screen readers announcing every tile (recent Leaflet versions set alt="" on tiles by default).
  • Verify the main marker icon image also exposes an alt attribute, since Leaflet only sets it when the marker alt option is provided.

User interface changes

API changes

Data model changes

Comments

camarao1911 created an issue.