Roundup of my Accessibility Resources

May 20 was Global Accessibility Awareness Day (#GAAD) and turns out - I created quite a bit of content about digital accessibility (a11y) last year!

CSS and Accessibility

CSS can strongly impact accessibility. Learn ways you can use CSS to improve accessibility by reviewing this tutorial covering:

• Focus Visibility
• Focus vs. Source Order
• Zoom and Reflow
• Sizing Targets
• Respecting User Settings

Read more on ModernCSS >

Color Contrast and Interactive Elements

Despite high general awareness of color contrast for a11y, what can be missed is how to handle contrast across states of interactive elements, like buttons.

Learn more about button contrast and generate an accessible palette with the help of ButtonBuddy.dev

Practice Evaluating Inaccessible Experiences

So, what does an inaccessible experience look like?

Try out evaluating this test site (motion warning).

And then practice identifying and submitting a review of issues by opening a PR into the project.

Automate Generating Accessible Color Palettes

Selecting a color contrast safe palette used to be what I spent a significant amount of time on.

The a11y-color-tokens package automates developing contrast safe text and background color pairs.

More info and package download >

Create Accessible, Cross-Browser Form Styles

Forms rule the web, & can quickly create accessibility issues, too. HTML semantics & carefully applied CSS are required for accessible form inputs.

Learn how to develop cross-browser, accessible form styles with my full egghead.io video course.

Learn About Common a11y Failures

On the podcast I co-host - Word Wrap - we did a two-part mini-series on a11y topics you might be missing that apply to all websites.

• Common Accessibility Failures
• WCAG Success Criteria You May Not Be Meeting

Drop a comment of your favorite accessibility resources, or something you learned from these!