WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
Coffee With Developers • Nov 28, 2024

Going on a CODE100 Accessibility Scavenger Hunt

Chris Heilmann , Daniel Cranney

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.

Pause
Mute Enter Fullscreen
#1 about 2 min

Setting up a deliberate accessibility puzzle challenge

Creating a deliberately broken webpage exposes how common UI patterns actively exclude users.

#2 about 3 min

Measuring contrast ratios and simulating color blindness

Using browser developer tools to verify contrast ratios and emulate visual deficiencies prevents readability barriers.

#3 about 2 min

Examining theme preferences and responsive custom typography

Relying on overly stylized fonts without dark mode alternatives heavily degrades text legibility.

#4 about 2 min

Testing viewport text zoom and flex wrap configurations

Allowing text scaling without proper flex wrapping forces horizontal scrolling or unreadable cut-off content.

#5 about 3 min

Reviewing accessible names for standalone media graphics

Missing alternative text on images and interactive graphics leaves assistive technology users without context.

#6 about 2 min

Aligning visual layout grids with document flow orders

Misusing flex ordering breaks natural keyboard navigation sequences by unlinking document structure from screen rendering.

#7 about 3 min

Replacing mouse interactions with native semantic summary elements

Swapping script-driven hover actions for native details elements ensures keyboard accessibility without focus trapping.

#8 about 3 min

Declaring document encoding and enforcing unique anchor identifiers

Ensuring valid markup attributes like language settings and unique anchor IDs prevents incorrect parsing by accessibility software.

#9 about 5 min

Diagnosing structural markup bugs with the tooling issues panel

Evaluating viewport definitions and nested heading hierarchies via native tooling efficiently uncovers hidden structural oversights.

#10 about 4 min

Wrapping smooth interface scroll routines in CSS motion queries

Respecting operating system reduced motion preferences protects users who experience motion sickness from aggressive interface animations.

#11 about 1 min

Applying stylesheet text transforms to capitalize readable content

Injecting capitalization entirely through style properties stops screen readers from mistakenly spelling out full acronyms.

#12 about 6 min

Binding explicit labels and structuring local input validation feedback

Hardcoding programmatic links between text labels and form inputs clarifies user intent and groups error messages natively.

#13 about 5 min

Visualizing tab sequence paths with accessibility extension tools

Utilizing advanced auditing plugins highlights hidden elements and missing keyboard focus outlines across deeply nested nodes.

#14 about 2 min

Integrating continuous accessibility code reviews early in development stages

Correcting structural barriers during initial stages inherently eliminates friction over late post-release debugging cycles.

Matching moments

8:18 min

Building interactive accessibility learning resources for web developers

Chris Heilmann Chris Heilmann +2 · LIVE

53 sec

Utilizing developer tools to test and improve accessibility

Ramona Schwering Ramona Schwering · Coffee With Developers

4:30 min

Addressing web accessibility challenges in development teams

Anuradha Kumari · World Congress 2023

3:08 min

Introduction to building accessible web frontends

Konstantin Tieber · World Congress 2022

4:49 min

Finding accessibility issues through manual keyboard navigation testing

Emma Dawson Emma Dawson · World Congress 2025

4:00 min

Exploring accessibility and responsive layouts across testing environments

Marcus Wojtusik +1 · World Congress 2022

More from Coffee With Developers

Using Agents to Curate the Content You See Online - Dan Gish thumbnail
12:47
about 1 month ago

Using Agents to Curate the Content You See Online - Dan Gish

Dan Gish

AI Vector Search at Scale - Ewa Szyszka - Ewa Szyszka thumbnail
11:14
about 1 month ago

AI Vector Search at Scale - Ewa Szyszka - Ewa Szyszka

Ewa Szyszka

What is Cross-Origin Storage - Thomas Steiner thumbnail
34:51
about 1 month ago

What is Cross-Origin Storage - Thomas Steiner

Thomas Steiner

Women in AI - Nalini Garg thumbnail
42:19
about 1 month ago

Women in AI - Nalini Garg

Nalini Garg

Agents and People Dynamics in Shared Chats - Sam Liu thumbnail
37:41
about 1 month ago

Agents and People Dynamics in Shared Chats - Sam Liu

Sam Liu

Why Token Reduction Isn’t Cost Reduction - Dave Anderson & Sarel Weinberger, PhD. thumbnail
41:09
about 2 months ago

Why Token Reduction Isn’t Cost Reduction - Dave Anderson & Sarel Weinberger, PhD.

Dave Anderson, Sarel Weinberger, Phd

Related videos

WeAreDevelopers LIVE – Inclusion, Accessibility & Automation thumbnail
1:09:45
LIVE • 11 months ago

WeAreDevelopers LIVE – Inclusion, Accessibility & Automation

Chris Heilmann, Daniel Cranney, Daniela Kubesch

WeAreDevelopers LIVE - Gaps in CSS, EU Accessibility Act and more! thumbnail
1:10:08
LIVE • over 1 year ago

WeAreDevelopers LIVE - Gaps in CSS, EU Accessibility Act and more!

Chris Heilmann, Daniel Cranney, Emma Dawson

Accessibility Features in Chrome DevTools and beyond thumbnail
30:17
Europe 2026 Virtual • 3 months ago

Accessibility Features in Chrome DevTools and beyond

Julia Undeutsch

The What, Why, Who and How of accessibility on the web thumbnail
29:59
World Congress 2022 • over 4 years ago

The What, Why, Who and How of accessibility on the web

Konstantin Tieber

WeAreDeveloper Live: Accessibility in the EU, CSS Gaps and forms with Emma Dawson thumbnail
1:10:08
LIVE • over 1 year ago

WeAreDeveloper Live: Accessibility in the EU, CSS Gaps and forms with Emma Dawson

Emma Dawson

Decoding web accessibility through audit thumbnail
29:03
World Congress 2022 • over 4 years ago

Decoding web accessibility through audit

Anuradha Kumari

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.