> Markdown version of [/videos/1252-going-on-a-code100-accessibility-scavenger-hunt](https://www.wearedevelopers.com/videos/1252-going-on-a-code100-accessibility-scavenger-hunt). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Going on a CODE100 Accessibility Scavenger Hunt

Are your over-engineered UI elements ruining keyboard navigation? Chris and Dan hunt down intentional frontend mistakes in a broken codebase. Discover why semantic HTML always wins.

- **Speakers:** [Chris Heilmann](https://www.wearedevelopers.com/@chris-heilmann), [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney)
- **Event:** Coffee With Developers
- **Published:** November 28, 2024
- **Duration:** 35:39
- **URL:** https://www.wearedevelopers.com/videos/1252-going-on-a-code100-accessibility-scavenger-hunt

## Summary

The video follows Chris and Dan from WeAreDevelopers as they dissect an intentionally flawed website built for a CODE100 accessibility challenge. Designed as an educational scavenger hunt, the session highlights common frontend mistakes that severely degrade the user experience for those relying on assistive technologies. By reviewing over-engineered elements—such as `div` tags masquerading as buttons or CSS-driven visual sequences that break logical keyboard navigation—the walkthrough demonstrates how relying on simple, semantic HTML often naturally yields accessible results.

Throughout the audit, the hosts use Chromium developer tools and the Accessibility Insights extension to uncover underlying issues. They simulate blurred vision and colorblindness to expose poor contrast ratios, identify SVGs missing titles and images lacking alternative text, and reveal how omitting fundamental document attributes confuses screen readers. The discussion provides highly practical fixes: mapping form labels to inputs using proper IDs, utilizing native `required` properties to contextualize error messaging, and respecting user constraints by leveraging `prefers-reduced-motion` to suppress extreme animations.

A central takeaway is the hidden architectural cost of retrofitting accessibility. The developers demonstrate that hover-exclusive interactions render content entirely invisible to keyboard users, while missing application focus states create unnavigable UI sections. By baking inclusive design principles into the upfront development phase, teams avoid tedious bug-fixing cycles and build substantially more resilient interfaces.

**Keywords:** web accessibility basics, chromium developer tools, semantic html structure, screen reader optimization, keyboard navigation debugging, color contrast testing, prefers-reduced-motion css, native html forms, accessibility insights extension, svg title attributes, css focus states, alt text implementation, frontend inclusive design, wcag compliance testing, form label association

## Chapters

1. **Setting up a deliberate accessibility puzzle challenge** (00:02) — Creating a deliberately broken webpage exposes how common UI patterns actively exclude users.
1. **Measuring contrast ratios and simulating color blindness** (01:22) — Using browser developer tools to verify contrast ratios and emulate visual deficiencies prevents readability barriers.
1. **Examining theme preferences and responsive custom typography** (03:41) — Relying on overly stylized fonts without dark mode alternatives heavily degrades text legibility.
1. **Testing viewport text zoom and flex wrap configurations** (05:21) — Allowing text scaling without proper flex wrapping forces horizontal scrolling or unreadable cut-off content.
1. **Reviewing accessible names for standalone media graphics** (06:30) — Missing alternative text on images and interactive graphics leaves assistive technology users without context.
1. **Aligning visual layout grids with document flow orders** (08:51) — Misusing flex ordering breaks natural keyboard navigation sequences by unlinking document structure from screen rendering.
1. **Replacing mouse interactions with native semantic summary elements** (10:24) — Swapping script-driven hover actions for native details elements ensures keyboard accessibility without focus trapping.
1. **Declaring document encoding and enforcing unique anchor identifiers** (12:44) — Ensuring valid markup attributes like language settings and unique anchor IDs prevents incorrect parsing by accessibility software.
1. **Diagnosing structural markup bugs with the tooling issues panel** (15:43) — Evaluating viewport definitions and nested heading hierarchies via native tooling efficiently uncovers hidden structural oversights.
1. **Wrapping smooth interface scroll routines in CSS motion queries** (19:49) — Respecting operating system reduced motion preferences protects users who experience motion sickness from aggressive interface animations.
1. **Applying stylesheet text transforms to capitalize readable content** (23:04) — Injecting capitalization entirely through style properties stops screen readers from mistakenly spelling out full acronyms.
1. **Binding explicit labels and structuring local input validation feedback** (23:57) — Hardcoding programmatic links between text labels and form inputs clarifies user intent and groups error messages natively.
1. **Visualizing tab sequence paths with accessibility extension tools** (29:03) — Utilizing advanced auditing plugins highlights hidden elements and missing keyboard focus outlines across deeply nested nodes.
1. **Integrating continuous accessibility code reviews early in development stages** (34:01) — Correcting structural barriers during initial stages inherently eliminates friction over late post-release debugging cycles.

## Related Moments

- [Building interactive accessibility learning resources for web developers](https://www.wearedevelopers.com/videos/1742-wearedevelopers-live-inclusion-accessibility-automation) (from "WeAreDevelopers LIVE – Inclusion, Accessibility & Automation")
- [Utilizing developer tools to test and improve accessibility](https://www.wearedevelopers.com/videos/1847-secure-and-accessible-login-systems-ramona-schwering) (from "Secure and Accessible Login Systems - Ramona Schwering")
- [Addressing web accessibility challenges in development teams](https://www.wearedevelopers.com/videos/649-making-interactions-accessible-to-all-users) (from "Making Interactions Accessible to All Users")
- [Introduction to building accessible web frontends](https://www.wearedevelopers.com/videos/403-the-what-why-who-and-how-of-accessibility-on-the-web) (from "The What, Why, Who and How of accessibility on the web")
- [Finding accessibility issues through manual keyboard navigation testing](https://www.wearedevelopers.com/videos/1671-oh-s-there-s-a-new-accessibility-law-and-i-m-not-ready) (from "Oh S***! There's a New Accessibility Law and I'm Not Ready!")
- [Audience questions on accessibility and framework tradeoffs](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")

## Related Articles

- [12 ways to fix an inaccessible web site  - the CODE100 Accessibility Scavenger Hunt results](https://www.wearedevelopers.com/magazine/511-12-ways-to-fix-an-inaccessible-web-site-the-code100-accessibility-scavenger-hunt-results)
- [Find all accessibility problems in a page to take part in the CODE100 final!](https://www.wearedevelopers.com/magazine/507-find-all-accessibility-problems-in-a-page-to-take-part-in-the-code100-final)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [How Developers Can Focus on Maintaining Satisfaction With Accessibility](https://www.wearedevelopers.com/magazine/109-how-developers-can-focus-on-maintaining-satisfaction-with-accessibility)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**