Movie theater seat map: broken, then fixed
The same 42 seats twice. First as the ticketing platform ships them, then rebuilt. Identical data, identical layout. Turn on a screen reader and move through both.
RoadHouse Cinemas Colorado Springs, TOY STORY 5, 7:40 PM, captured July 30 2026. Real seat data, 14 sold.
As shipped
- No checkbox has an accessible name. VoiceOver covers for it by reading the number sitting next to the control, so this sounds fine. Nothing in the page connects the two.
- Sold seats are not disabled. They are held back by
pointer-events: none, so a mouse cannot click them and a keyboard can. - Row letters are spans, not headings. Reaching row D means passing every seat before it.
- Seat type exists only as a CSS class, so love seats and wheelchair spaces are never spoken.
- Purchase Tickets is an
<a>with nohref. Deselect All is a<div>.
Screen
A
10
9
8
7
6
5
4
3
2
1
B
8
7
6
5
4
3
2
1
C
8
7
6
5
4
3
2
1
D
8
7
6
5
4
3
2
1
E
8
7
6
5
4
3
2
1
Available
Sold
Selected
Purchase Tickets
Deselect All
Rebuilt
- Each seat is named from data already in the page: "Row C, seat 7, love seat, sold, not available."
- Sold seats carry
aria-disabledand refuse selection from any input method, not just the mouse. - Row letters are headings, so heading navigation jumps straight to a row.
- Purchase Tickets and Deselect All are real
<button>elements. - Selections are announced in a status region.
- No visual change to the grid.
Screen
Row A, 10 of 10 available
Row B, 8 of 8 available
Row C, 5 of 8 available
Row D, 3 of 8 available
Row E, 2 of 8 available
Available
Sold
Selected
No seats selected.
WCAG 2.2
1.3.1 Info and Relationships, 1.4.1 Use of Color, 2.1.1 Keyboard, 2.4.6 Headings and Labels, 4.1.2 Name, Role, Value.