Road closures, ward boundaries, outage areas, budgets: cities communicate a lot with maps and charts. For a resident who is blind, uses a keyboard instead of a mouse, or has low vision, an interactive map can be a locked door. WCAG 2.1 doesn’t ban maps and charts — it asks that the information be available another way.
The principle: same information, another format
WCAG’s first guideline is that non-text content needs a text alternative (1.1.1 Non-text Content). For a simple image that’s a sentence of alt text. For a map or chart, the W3C’s complex images tutorial recommends a short description plus a longer, structured alternative.
Maps
- Always provide a list. Every pin on the map should also appear in a text list with its name, address and details. For closures and outages, include dates and streets.
- Make it keyboard-operable. Zoom, pan and pins must work without a mouse (WCAG 2.1.1).
- Offer a “list only” view and a skip link past the map, so keyboard users don’t have to tab through dozens of pins.
- Don’t rely on color alone to show categories or status (1.4.1 Use of Color) — add labels, icons or patterns.
- Embedded maps need a title on the frame, so screen readers can announce what it is.
Charts
- Include the data as a table, with a caption and header cells. A “Show data table” button is a good pattern.
- Write a one-sentence summary of what the chart shows: “Public safety is the largest share of the 2026–27 budget, at 38%.”
- Check graphical contrast. Bars, lines and pie slices need a 3:1 contrast ratio against their background and neighbors (1.4.11 Non-text Contrast).
- Use patterns or direct labels in addition to color.
How Sentra CMS helps
Every map widget in Sentra CMS renders an accessible list of the same pins, with a “Map and list / List only” toggle and a skip link. Chart widgets draw labeled SVG charts with patterns and include the data table. Both are certified against the accessibility checker before they can be used on public pages.