Accessible Charts and Maps

Charts and maps are among the hardest elements to make accessible because they encode information visually. WCAG 2.2 AA and AAA require that all information in a chart or map is also available in a text alternative — usually a data table. This page shows live examples using Chart.js and OpenStreetMap, each paired with a data table.

Note: Future updates to this page will add more interactive working components — editable chart configs, color-contrast checkers, and accessible D3 pattern examples — directly in the browser.

Why this matters for neurodivergent users

Charts benefit users who process visual information more easily than text, including many ADHD users. But without accessible alternatives, charts exclude screen reader users, color-blind users, and anyone who needs the raw data to do their own analysis.

Always provide both: the visual chart AND a text data table. Color alone must never be the only way to distinguish data series (SC 1.4.1). Use shape, pattern, or label alongside color.

Neurodivergent conditions: US vs World prevalence

The bar chart below shows estimated prevalence (% of population) for six neurodivergent conditions in the United States and globally. Sources: CDC, World Health Organization, and peer-reviewed prevalence studies (2023–2024). Estimates reflect diagnosed and undiagnosed populations.

Neurodivergent condition prevalence, US and world estimates (%). Sources: CDC ADHD data 2023; Yale Center for Dyslexia; CDC autism surveillance 2023 (1 in 36); international estimates from WHO and peer-reviewed studies.
Condition	US estimate (%)	World estimate (%)
ADHD	10%	7.2%
Dyslexia	17%	15%
Autism Spectrum	2.8%	2.3%
Dyscalculia	5%	3.5%
Dyspraxia	5%	4.5%
Anxiety Disorder	19%	16%

US neurodivergent population by condition

The doughnut chart shows estimated absolute population counts for each condition in the United States (based on a 2024 population of approximately 335 million). Note that conditions overlap — a person may have both ADHD and dyslexia. Total unique neurodivergent individuals is estimated at 15–20% of the population (50–67 million).

Estimated US neurodivergent population by condition (2024). Populations overlap — individuals may qualify under multiple categories.
Condition	Prevalence	Estimated US count
Anxiety Disorder	19%	63,650,000
Dyslexia	17%	56,950,000
ADHD	10%	33,500,000
Dyscalculia	5%	16,750,000
Dyspraxia	5%	16,750,000
Autism Spectrum	2.8%	9,380,000

Neurodivergent population density: WA, OR, CA

The map below shows estimated neurodivergent population per major city in Washington, Oregon, and California. Circle size is proportional to total city population. The percentage estimate (18–23%) reflects local diagnostic rates and is higher in tech-heavy metro areas (San Francisco, Seattle) due to higher diagnosis rates. Hover over or click a circle for the city's data.

This map uses OpenStreetMap tiles via Leaflet.js. Keyboard users: the map is marked as a region and all data is available in the table below.

Loading map…

Neurodivergent population estimates for major cities in WA, OR, and CA. City populations from 2020 US Census / 2024 estimates.
City	State	Population	ND estimate (%)	ND count (est.)
Seattle	WA	749,256	21%	157,344
Spokane	WA	228,989	20%	45,798
Tacoma	WA	222,891	22%	49,036
Portland	OR	635,067	22%	139,715
Eugene	OR	176,654	21%	37,097
Salem	OR	175,535	20%	35,107
Los Angeles	CA	3,898,747	19%	740,762
San Francisco	CA	873,965	23%	201,012
San Diego	CA	1,386,932	18%	249,648
Sacramento	CA	524,943	20%	104,989
San Jose	CA	1,013,240	21%	212,780

How to make Chart.js charts accessible

Always pair with a data table (SC 1.1.1) — the table is the authoritative text alternative. Wrap the canvas inaria-hidden="true" so screen readers skip to the table.
Never use color alone to distinguish datasets (SC 1.4.1) — add different patterns, shapes, or direct data labels.
Contrast ≥ 3:1 for all chart elements against their background (SC 1.4.11 Non-text Contrast, AA).
Tooltipsmust be keyboard accessible — use Chart.js's tooltip plugin with keyboard trigger support.
Axis labels must be readable at 200% zoom and meet contrast requirements.
Responsive sizing — set responsive: true and maintainAspectRatio: false with a container height so charts reflow on mobile.

How to make Leaflet maps accessible

Wrap with role="img" and aria-label on the container — describes the map to screen readers.
Pair with a data table — all geographic data displayed as markers or layers must have a text equivalent.
Keyboard navigation — Leaflet supports zoom (+/−), pan (arrow keys), and marker focus (Tab). Do not disable keyboard handlers.
Color alone must not convey layer meaning (SC 1.4.1) — use labels on markers, not just color fill.
Focus indicator — markers must have visible focus ring meeting SC 2.4.11 (AAA, 3:1 contrast, ≥ 2px).