A Designer’s Guide to Getting Started with Accessibility
In 2020, accessibility is not a trend; it’s officially a part of your job description as a designer. Work colleagues may still be learning its importance but as a designer you have a responsibility to advocate for inclusivity. It’s not only the user’s civil right but also good business, increasing the amount of users who can enjoy your product or service.
How to get started?
I’m going to give a quick walk through of a tool to audit a site of your choosing. It will give you a sense of how the site meets the Web Content Accessibility Guidelines (WCAG). I’ll also provide links to additional resources that have really helped me with developing a deeper understanding of designing for accessibility.
The Tool: Lighthouse in Chrome Dev Tools
This tool requires no additional downloads or third party services. Lighthouse is an open source automated tool built right into Chrome Dev Tools. This makes it a really easy and accessible way to get your feet wet with accessibility.
Step 1 — Pick a Website to Audit
For the following example, I picked Stack Overflow, an incredibly useful site for developers to exchange tips and tricks. But you can choose whatever site you’d like including your own.
Step 2 — Open Chrome Dev Tools
For Macbook, you can use the shortcut Command + Option + J or if on a Windows/Linux operating system, Shift + CTRL + J.
A window should pop-in from the right that shows the browser’s console.
Step 3 — Navigate to the Lighthouse Tool.
With the console open, you may notice a set of small double arrows pointing to the right implying more menu options.
Scroll down to Lighthouse.
Step 4 — Select the “Accessibility” Option
You should see different categories in which to audit your site. You’ll want to make sure “Accessibility” is selected. You can select additional audits to find out more about your site but for this exercise, I recommend only checking the box for Accessibility. This will keep the report from getting too long/overwhelming.
With Accessibility selected, click generate report.
Want to read this story later? Save it in Journal.
Step 5: Review the report
The report generated will highlight areas of the site that need improvement. It will also include a score. My example site received a 74. According to Lighthouse, this is a medium score hence the orange color. The documentation to Lighthouse’s auditing can be found here.
- Score 0–49: Really needs improvement
- Score 50–89: Needs improvement
- Score 90–100: Technically, it’s ok. It meets the minimum requirements for having an accessible site. In WCAG terms, it would receive an A from their scale of A, AA and AAA. With AAA being the most thorough.
Areas that need improvement can be accessed by the drop down arrows shown to the far right of each line item. There you’ll find more specifics as to types of errors and where to find them in the code.
Conclusion
🥳 🥳 Congrats you just conducted your first site audit! 🥳 🥳
And goodie you have some homework! Whether you received a good score or “needs improvement” score, you now have a more concrete sense of how your site is meeting accessibility requirements. This is truly the tip of the iceberg when it comes to accessibility. But it’s important to start your learning journey now.
I’ve linked some resources below I’ve found especially helpful. Remember even a score of a 100 through Lighthouse likely means you are still just meeting the requirements. I encourage you to cross reference with other tools and peruse the links below.
Good luck in creating better & more inclusive technology.
- Helps you find a combination of background color, text color and font size that will meet AA accessibility standards.
https://adresults.com/tools/alt-tags-checker/
- Finds all the images on your site with empty ALT tags. Empty ALT tags are especially bad for screen readers, a form of assistive technology.
- A more designer friendly way to audit your site for accessibility. Good to cross reference scores.
https://www.a11yproject.com/checklist/
- The A11Y Project is a phenomenal place to get started with Accessibility. This link brings you specifically to their checklist, always good to keep handy, but I really recommend going through this entire site.
More from Journal
There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us:
