Chris Heilmann & Daniel Cranney
Going on a CODE100 Accessibility Scavenger Hunt
#1about 3 minutes
Using developer tools to check color contrast
Browser developer tools can be used to check color contrast ratios and simulate various forms of color blindness to identify visual accessibility issues.
#2about 3 minutes
Addressing font readability and responsive reflow
Fancy or small fonts can be unreadable, and improper CSS flexbox settings can cause content to be cut off when users zoom in.
#3about 2 minutes
Providing alternative text for images and SVGs
Images must have an `alt` attribute and SVGs should include a `title` element to provide context for screen reader users.
#4about 4 minutes
Correcting keyboard navigation and hover-only interactions
Using CSS `flex order` can break the logical tab order, and mouse-only hover interactions hide content from keyboard and screen reader users.
#5about 6 minutes
Auditing semantic HTML and page structure
Common structural issues like a missing `lang` attribute, non-unique element IDs, and improper heading order can be found using the DevTools Issues panel.
#6about 4 minutes
Creating discernible links and managing motion
Links must make sense out of context, avoiding generic text like 'read more', and animations should respect the `prefers-reduced-motion` media query.
#7about 6 minutes
How to build accessible forms and validation
Accessible forms require properly associated labels, real button elements for submission, and error messages placed near the relevant input field.
#8about 5 minutes
Using automated tools for accessibility testing
Browser extensions like Accessibility Insights can automate checks for issues like color contrast, tab order, and missing landmarks to streamline auditing.
#9about 2 minutes
Why you should integrate accessibility early
Addressing accessibility from the start of a project is far more efficient than trying to fix deeply integrated issues after development is complete.
Related jobs
Jobs that call for the skills explored in this talk.
Eltemate
Amsterdam, Netherlands
Intermediate
Senior
TypeScript
Continuous Integration
+1
Matching moments
01:32 MIN
Organizing a developer conference for 15,000 attendees
Cat Herding with Lions and Tigers - Christian Heilmann
04:49 MIN
Using content channels to build an event community
Cat Herding with Lions and Tigers - Christian Heilmann
04:57 MIN
Increasing the value of talk recordings post-event
Cat Herding with Lions and Tigers - Christian Heilmann
03:17 MIN
Selecting strategic partners and essential event tools
Cat Herding with Lions and Tigers - Christian Heilmann
04:22 MIN
Why HR struggles with technology implementation and adoption
What 2025 Taught Us: A Year-End Special with Hung Lee
03:38 MIN
Balancing the trade-off between efficiency and resilience
What 2025 Taught Us: A Year-End Special with Hung Lee
03:35 MIN
Building a one-time code input with semantic HTML
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
02:44 MIN
Rapid-fire thoughts on the future of work
What 2025 Taught Us: A Year-End Special with Hung Lee
Featured Partners
Related Videos
56:00Data Mining Accessibility
Karl Groves
29:03Decoding web accessibility through audit
Anuradha Kumari
1:06:13WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more
Chris Heilmann & Daniel Cranney & Dirk Ginader
56:01Preventing Accessibility Issues Instead Of Fixing Them
Dirk Ginader
32:00Is This App Accessible? A Live Testing Demo
Eeva-Jonna Panula
23:33Accessibility Test Driven Development
Maria Korneeva
24:30Oh S***! There's a New Accessibility Law and I'm Not Ready!
Emma Dawson
1:09:45WeAreDevelopers LIVE – Inclusion, Accessibility & Automation
Chris Heilmann, Daniel Cranney & Daniela Kubesch
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
Exclusive Associates
CSS
React
Next.js
JavaScript
TypeScript
+1