A bridge building exercise in accessibility
Build a bridge and learn about why accessibility matters in design.
This demo compares an intentionally broken hot dog ordering site with a fully accessible mirror. Use it to show how keyboard navigation, focus visibility, colour meaning, and responsive layout affect real users.
What the demo shows
-
1
Autoplaying video content
The bad site has an autoplaying video, which has no mechanism for pausing, stopping or hiding it.
-
2
Poor heading structure
The bad site has a poor heading structure, meaning those who navigate page content using headings will not understand the strucure of the content.
-
3
Colour only meaning
The bad site uses text links which are only differentiated by colour, meaning those with colourblindness may not perceive them.
-
4
Missing focus states
The bad site has some controls which lack visible focus states, preventing keyboard users from knowing where their focus is on the page.
-
5
Dragging movements
The bad site includes a carousel that can only be operated with a dragging movement, making its content unavailable to some users with motor impairments.
-
6
Incorrect control structure
The bad site grouped controls that are not programatically associated with their overall group label.
-
7
Poor form instructions
The bad site has some inaccurate form labels as well as poorly identified mandatory fields.
-
8
Unhelpful error messages
The bad site uses non-specific error messages for field validation which are not associated with their respective fields, making it harder to know the correct values to enter for some fields.