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.
Matching moments
07:01 MIN
The importance of web accessibility as a core developer craft
WAD Live 22/01/2025: Exploring AI, Web Development, and Accessibility in Tech with Stefan Judis
18:43 MIN
Q&A on practical accessibility challenges
Preventing Accessibility Issues Instead Of Fixing Them
02:09 MIN
Using automated tools to find common accessibility issues
Oh S***! There's a New Accessibility Law and I'm Not Ready!
06:25 MIN
Proactively auditing CSS for accessibility and compliance
Future-Proof CSS
03:16 MIN
Using Microsoft Accessibility Insights for automated testing
Blazing Accessibility Basics
08:23 MIN
Finding accessibility checklists and building team empathy
WeAreDeveloper Live: Accessibility in the EU, CSS Gaps and forms with Emma Dawson
03:11 MIN
Auditing a sample application for accessibility issues
Accessibility powered by AI
05:12 MIN
Leveraging browser devtools for accessibility analysis
Decoding web accessibility through audit
Featured Partners
Related Videos
56:00Data Mining Accessibility
Karl Groves
56:01Preventing Accessibility Issues Instead Of Fixing Them
Dirk Ginader
1:06:13WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more
Chris Heilmann & Daniel Cranney & Dirk Ginader
29:03Decoding web accessibility through audit
Anuradha Kumari
23:33Accessibility Test Driven Development
Maria Korneeva
32:00Is This App Accessible? A Live Testing Demo
Eeva-Jonna Panula
38:58WeAreDevelopers LIVE - Is Software Ever Truly Accessible?
Chris Heilmann, Daniel Cranney & GrahamTheDev
24:30Oh S***! There's a New Accessibility Law and I'm Not Ready!
Emma Dawson
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
infomax websolutions GmbH
Grassau, Germany
Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
Deloitte
Senior
HTML
JIRA
Figma
Confluence
Deloitte
Senior
HTML
JIRA
Figma
Confluence
Codext GmbH
Wolpertshausen, Germany
€40K
HTML
Node.js
TypeScript
Tech Solutions Gmbh
GIT
HTML
Vue.js
Tech Solutions Gmbh
GIT
HTML
Vue.js