Persistent labels and values
Each bar has a visible category, count, capacity, and percentage. The information no longer depends on color or hover.
Project 03 · Data visualization accessibility
Accessible data visualization
Case study overview
This case study transforms a color- and hover-dependent enrollment chart into an experience with clear labels, exact values, keyboard-operable controls, announced updates, and an equivalent data table. The comparison shows how the same information can remain useful without relying on color or vision.
- My role
- Designed the simulation; tested, remediated, and verified equivalent data
- Scope
- Workshop enrollment chart and reporting-period control
- Test matrix
- Keyboard, screen reader, contrast, status updates, and table equivalence
- Outcome
- Meaning and exact values available without color, hover, or vision
Training note: This fictional chart intentionally contains accessibility barriers for comparison.
| Severity | Barrier | User impact | WCAG | Remediation and status |
|---|---|---|---|---|
| Serious | Unlabeled summary values | The headline numbers did not explain what they measured. | 1.3.1 · 4.1.2 | Added a labeled text summary with exact values. Targeted retest: passed |
| Serious | Color-dependent meaning | Users unable to distinguish the colors could not interpret the chart. | 1.4.1 | Added labels, values, and status information in text. Targeted retest: passed |
| Serious | Hover-only values | Keyboard and touch users could not reach values exposed only on hover. | 1.3.1 · 2.1.1 | Displayed every value persistently beside its bar. Targeted retest: passed |
| Serious | No equivalent data table | Users could not review or compare the underlying values in a structured form. | 1.1.1 · 1.3.1 | Added a captioned table with row and column headers. Targeted retest: passed |
| Moderate | Updates not announced | Changing the reporting period did not communicate the new result. | 4.1.3 | Added a polite status summary that updates with the selection. Targeted retest: passed |
Equivalent structured data
A captioned table exposes the same values with correctly associated row and column headers.
Communicated updates
The native selector works by keyboard, and a polite live region announces the updated reporting summary.
Choose a reporting period and review the same result as labeled bars, a text summary, and a structured table.
Fall summary: 173 of 212 seats are filled across all workshops (82%).
Everyday budgeting72 of 80 (90%)
Digital essentials58 of 72 (81%)
Community gardening43 of 60 (72%)
| Workshop | Registered | Capacity | Seats remaining | Percent filled |
|---|---|---|---|---|
| Everyday budgeting | 72 | 80 | 8 | 90% |
| Digital essentials | 58 | 72 | 14 | 81% |
| Community gardening | 43 | 60 | 17 | 72% |
The remediated experience was retested with keyboard navigation, screen-reader output, contrast review, dynamic status updates, and comparison between the chart and table. All five documented findings passed targeted retesting.
Scope note: This focused fictional exercise evaluates the displayed chart and control; it is not a full-product conformance certification.