Project 03 · Data visualization accessibility
Enrollment metrics everyone can understand
A comparison of a color-dependent dashboard and a remediated version with text summaries, labeled values, keyboard-accessible controls, and an equivalent data table.
- My role
- Designed the simulation; tested, remediated, and verified equivalent data
- Key criteria
- 1.1.1, 1.3.1, 1.4.1, 2.1.1, and 4.1.2
- Test matrix
- Keyboard, screen reader, contrast, status updates, and table equivalence
- Outcome
- Meaning and exact values available without color, hover, or vision
Before · intentionally inaccessible
Enrollment dashboard
17321282
Bar meaning, status, and exact values depend on color and hover. The three headline numbers are unlabeled, and no equivalent data table is provided.
After · remediated
Workshop enrollment
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% |
Every visible relationship is also available in text. The selector works by keyboard, updates are announced, and exact values remain available without color or hover.