Making websites navigable without a mouse
Scenario:
David is building a contact form for his freelance design business. He's excited about the modern layout but didn't realize the tab order jumps around confusingly. When his friend Jamie, who navigates exclusively with keyboard due to a motor disability, tried to fill out the form, she got frustrated because pressing Tab didn't move through the fields in a logical order. Help David fix the tab sequence so keyboard users like Jamie can smoothly navigate through his contact form!
Your Task:
Fix tab order with tabindex
Success Metric:
Logical tab order
Scenario:
Taylor designed a sleek navigation menu with custom styling that removes the default focus outlines because they thought it looked 'cleaner.' However, when their colleague Sam, who uses keyboard navigation due to repetitive strain injury, tried to navigate the site, they couldn't tell which button was currently selected. Sam kept getting lost and couldn't complete basic tasks. Help Taylor add visible focus indicators that maintain the site's aesthetic while ensuring keyboard users like Sam can see exactly where they are!
Your Task:
Add visible focus indicators
Success Metric:
Clear focus indicators
Scenario:
Maya built a news website with a comprehensive navigation menu containing 20+ links. While this is great for discoverability, her user testing revealed that keyboard users like Jordan, who has limited mobility, have to tab through every single navigation link just to reach the main article content. Jordan mentioned it takes nearly a minute just to get to the actual news story! Help Maya add a skip link so keyboard users can jump directly to the main content and start reading immediately.
Your Task:
Add skip navigation link
Success Metric:
Working skip link