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
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.
Drop a comment of your favorite accessibility resources, or something you learned from these!
Top comments (2)
Thank you for this, Stephanie! Do you happen to have articles on l11n as an a11y resource or could recommend any texts about it? I am a translator who codes, and I am preparing a course about software localization.
Thanks for this article, I got to learn of this new resource
ButtonBuddy.dev