DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Week 1 Day 6: Score 100% in an a11y audit
Geoff Davis
Geoff Davis

Posted on

Week 1 Day 6: Score 100% in an a11y audit

Welcome to Week 1, Day 6 of my Weekly UI challenge! As I stated in the announcement post, week 1 will focus on an ecommerce listing UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day six, our goal is to…

Score 100% in an a11y audit

Accessibility– or a11y, pronounced "ally"– is a very important concept in modern web development. No matter whether you are building web applications or simple static landing pages, making a web page accessible should be on the forefront of every developer and designer's mind. For many, this is an afterthought, but a11y is quickly becoming a metric in SEO ranking and vital to the legal integrity of your web page/app; it is also a good idea and strategy to make it easier for users to actually use your site/app/widget.

A11y techniques span quite a few domains and disciplines, from HTML attributes and CSS states, to colors used in the design (you may notice that most colors I used in my design have WCAG contrast ratings of at least AA for their relevant domains) and text that no one will interact with unless they use a screen reader. In order to test for a web page's accessibility, there are several tools floating around the web. One such tool is a11y.css.

My design/features have not changed since Day 5, so for Day 6, my first image is what my component looks like with a11y.css enabled:

ecommerce listing showing orange knitted winter hat, the name of item "Thinsulate Winter Cap", and the $20.99 sale price with a crossed out $34.99 price, and an "add to cart" button in blue, on the bottom, with outlines around components showing accessibility ratings

The above screenshot shows what an erroneous web page looks like when using the a11y.css bookmarklet. a11y.css is an awesome tool that uses CSS targeting to find a11y errors, warnings, and advisable tips in your code, and show you the messages inline. You can even configure the tool to target only certain levels of warnings too. When I start working on improving accessibility, this tool is the first one I use.

Another tool I use is the Google Lighthouse accessibility audit, here is what it looks like after successfully adjusting any changes the tool suggests:

Screenshot of ecommerce listings and a developer tools panel showing a 100% accessiblity audit score (you'll just have to take my word for it)

This tool will check all the types of things a11y.css does, and then some. It allows a little more control over debugging, as it will list offending elements, and scolling over that list will highlight those elements in the DOM, much like normal devtools do. I also find Lighthouse a lot easier to figure out what to fix, since it will also link to explainer pages for each error.

I've linked several tools and resources for a11y techniques and testing in the footnotes of this post, and I hope you use them and explore ways to help make the web usable for everyone!

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! πŸŽ‰

Week 1 Calendar

  1. Design component βœ…
  2. Display product name, price, and image βœ…
  3. Add to cart button, favorite button βœ…
  4. Sale price display, sold out states βœ…
  5. Color variant thumbnail buttons βœ…
  6. 100% a11y score 🎯
  7. Tweaks, refactors, fixes

Resources

Top comments (1)

Collapse
 
aspittel profile image
Ali Spittel • Edited on

Yay! Just had to change the font color on the button!

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›