10 minutes total

Universal Design Champions

Comprehensive accessibility thinking

Today you'll help Everyone, including users with diverse needs and preferences
Activity 1
Responsive Text Resizer
2-3 min

Scenario:

Morgan created a beautiful recipe blog with fixed-width containers and small text. Everything looks perfect on their high-resolution monitor, but when their grandfather Robert, who has age-related vision changes, tries to read the recipes, he zooms his browser to 200% to make the text readable. Unfortunately, the fixed layout causes horizontal scrolling and cuts off important ingredients! Robert gets frustrated and can't follow the recipes. Help Morgan make the layout flexible so users like Robert can zoom in comfortably while still accessing all the content.

Your Task:

Fix layout for 200% zoom

Success Metric:

Content remains usable at 200% zoom

Activity 2
Motion Sensitivity Supporter
2-3 min

Scenario:

Casey designed an engaging loading screen with spinning animations and sliding transitions to make their app feel dynamic and modern. However, their colleague Sam, who has vestibular disorders, experiences dizziness and nausea when viewing the constant motion. Sam mentioned they have to look away from the screen or close the app entirely when these animations play. Help Casey respect users' motion preferences so people like Sam can use the app comfortably without triggering their vestibular symptoms.

Your Task:

Add prefers-reduced-motion CSS

Success Metric:

Animations respect user preferences

Activity 3
Multi-Modal Master
2-3 min

Scenario:

Riley created an educational video series about web development fundamentals. The videos are informative and well-produced, but their student Lisa, who is deaf, can't access the audio content and feels left out of the learning experience. Additionally, their student Marcus, who has auditory processing difficulties, struggles to follow along with just the audio and would benefit from reading the content as well. Help Riley make the videos accessible to learners like Lisa and Marcus by providing multiple ways to access the same information.

Your Task:

Add captions and transcript link

Success Metric:

Captions visible and accurate