DEV Community

loading...
Cover image for Roundup of my Accessibility Resources

Roundup of my Accessibility Resources

Stephanie Eckles
(she/her) โœ๏ธ ModernCSS.dev, ๐Ÿ‘ฉ๐Ÿผโ€๐ŸŽจ StyleStage.dev, ๐Ÿ‘ฉโ€๐Ÿ’ป Software Engineer, ๐Ÿ‘ฉโ€๐Ÿซ @eggheadio instructor, ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง mom
ใƒป2 min read

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.

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

Discussion (3)

Collapse
sheilagomes profile image
Sheila Gomes

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.

Collapse
abiolaesther_ profile image
Abiola Esther

Thanks for this article, I got to learn of this new resource
ButtonBuddy.dev