Going on a CODE100 Accessibility Scavenger Hunt

What accessibility bugs are hiding in plain sight on your website? Learn how to find them using only your browser's developer tools.

#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