Accessibility - Cluster Marker Titles

This example demonstrates the clusterMarkerTitle option for accessibility. Cluster markers will have a title attribute that screen readers can announce and that appears as a tooltip on hover.

Why is this important?

• Since Leaflet 1.8+, interactive markers have role="button"
• WCAG accessibility standards require buttons to have descriptive labels
• Screen readers need text to announce what the cluster represents
• Hover tooltips help all users understand cluster contents

Configuration:

The clusterMarkerTitle option can be:

• A string: "Click to expand cluster"
• A function: Returns dynamic text based on cluster content

let markers = new L.MarkerClusterGroup({
  clusterMarkerTitle: function(cluster) {
    const count = cluster.getChildCount();
    return 'Cluster with ' + count + 
      (count === 1 ? ' marker' : ' markers');
  }
});

// Add markers
for (let i = 0; i < 100; i++) {
  let marker = L.marker(randomLatLng);
  marker.bindPopup('Marker ' + (i + 1));
  markers.addLayer(marker);
}

map.addLayer(markers);

Try it:

• Hover over cluster markers to see the title tooltip
• Open DevTools and inspect a cluster marker element
• Look for the title attribute on the marker's DOM element
• Use a screen reader to hear the cluster descriptions