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 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
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
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.
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.
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.
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.
Drop a comment of your favorite accessibility resources, or something you learned from these!