At conferences, I always gravitate towards accessibility talks. I think the subject is super interesting and I always come out wanting to be an advocate. Unfortunately, these feelings of inspiration have always been fleeting and I've never actually taken any action. Or remembered much.

UNTIL..

Google I/O. While I'm sure they mentioned the updated audit tab in Chrome DevTools during the developer keynote...

The Practical Dev

@thepracticaldev

I'm not saying you didn't learn anything, but...

17:37 PM - 04 Apr 2017

...I didn't learn about it until I walked into their accessibility tent. There, I met Dirk, a ux engineer, and I asked him what his part of the tent was 'all about.' This is where I learned about the new audit tab that quickly told me all the things that make dev.to not accessible. Dirk was incredibly patient and did an entire walkthrough with me. Below were some of my takeaways from auditing dev.to:

Why the audit tab is wonderful

• It's fast.
• You can run an audit without downloading any extensions or turning to the command line.
• The report tells you exactly where your elements are failing, and why it's important for them to pass.
• It has me coming back for more. I want to see my score increase as I make changes to the site.

Things I Learned

• alt attributes are crucial. Visually-impaired users rely on screen readers to navigate the web. If your image contains important info, the screen reader won't be able to determine the context unless you add an alt-tag.
• If you don't have an alt tag, it'll read the name of the image. How many images do you have titled 17942/28acb955-1ad6-4290-9404-3bb3c360ecb7.jpg? Yeah, probably a lot. And now, your user needs to hear that string dictated at them.
• For decorative images (images that don't add informational content), you can leave the attribute empty, i.e. alt="".
• Color contrast: I learned that our mint green buttons with white text didn't offer enough contrast, which makes it difficult for users to read. At Saron Yitbarek's talk at Signal, I learned that 1 in 12 men are colorblind. That's a lot of people.
• If you're failing the color contrast test, try using this tool that lets you play around with your colors to find your closest options.

How To Audit Your Site

1. If you don't have it already, download Chrome Canary, the chrome browser for devs and early adopters. The audit tab should be coming to all chrome browsers soon, but they're still working out some kinks.
2. Once you're in Canary, visit your site, and go into devtools.
3. Navigate to the audit tab.
4. Choose accessibility, and click audit!

You'll see something like this:

And you can click into the report to see which elements are failing:

Going Further

If the audit doesn't inspire you to take action, try navigating your site with a screen reader. On macs, this would be system preferences -> accessibility -> enable voiceover. You'll quickly learn what the user experience is like for some of your users.

I also learned about screen magnifiers today and recommend everyone to check out Frederik Creemer's post, How to Make Your Website Accessible to People Who Use a Screen Magnifier.

Additional Resources

• Google's overview of accessibility for devs
• Udacity's Course for Web Accessibility

Thanks for reading

I hope I've encouraged you to run an accessibility audit and I'm happy to share that we've created issues to address the tests that failed on dev.to 😊