Recipe 03: Patterns & Polygons
Color blindness affects ~8% of men. Never rely on color alone to distinguish map regions. Use patterns (hatching, dots, borders) alongside color.
Try:
57 Wapping Wall,
15 Prescot St,
251 Tooley St
Accessibility Features
- Redundant Coding: Regions are distinguished by Color + Pattern (SVG fills). This accommodates color blindness.
- HTML Legend: The legend is not part of the map canvas image. It is standard HTML text, making it accessible to screen readers and searchable.
- Semantic Legend Buttons: Legend items use real
<button>elements instead ofrole="button"divs, providing native keyboard and screen reader support. - The "Search Alternative": Spatial queries ("What zone is this address in?") are hard for blind users. We provide a simple text-based search form that answers the user's question directly, bypassing the map entirely.
- Skip Link: A visible-on-focus skip link lets keyboard users bypass the map.
Try This
- Use the Search: Enter "57 Wapping Wall" and press Enter. Notice how it finds the zone without you needing to look at the map.
- Observe Visual Connection: When a result is found, we fly the map to the location, visually connecting the data point to its context.
- Interactive Legend: Click or Tab to the legend items to jump to that zone.