Usability, accessibility … it’s really a continuum of the same issue. Steve Krug recommends building in one morning a month — that’s only 4 hours — to work on usability. For the record, I recommend lumping accessibility in there too. It’s a helpful rule to implement because it allows you to carve out a bit of time to make things better, but not giving it such an overwhelming focus that you don’t get anything else done. It’s manageable.
To that end, I fully endorse doing guerrilla testing for usability and accessibility because let’s face it: something is always better than nothing. Even at one morning a month, you can still chip away to make things better on your site. Here are some of my favorite tools and resources — they’re easy, they’re free, and they’re helpful. I’ve broken them into a couple of broad categories:
As always, your mileage may vary. Know of something I’ve missed? By all means, please let me know. We’re all in this together, and it’s important to help each other whenever when can to make our time on the web better.
One Stop Shopping Sites
- Usability.gov is my go to usability site. It gives a great overview of the multiple facets of usability and user experience, and provides you with the what, why, how tos and tools — not to mention resources. There is a lot in this site for you to explore.
- The A11y Project is my go to accessibility site. As their About page states, #Ally (shorthand for the eleven lettered word “accessibility”) is hard, and they want to help to make web accessibility easier for front end developers to implement. Their strategy is to accomplish this by making content digestible (short, digestible pieces of content), up-to-date (the project is hosted on Github so information can be current with latest standards), and forgiving (people make mistakes and they seek to be encouraging).Why it’s great: it has incredibly valuable content in easy-to-understand English. There’s an accessible widget & pattern library, an #Ally checklist, and a list or resources for everything from software, screenreaders, html, books, blogs, online tools, talks, and even additional community help. Go. Now. Embrace The #A11y Project.
- WebAIM (Web Accessibility In Mind) is another site whose goal is to make things easier for everyone. I love that. While they offer amazing accessibility training sessions, you don’t have to spend money to use their resources on the web. This is the home of the WAVE web accessibility evaluation tool.Why it’s great: A robust tool that shows you a wide swath of errors and alerts for structural elements, html5, ARIA and even contrast errors — and you don’t even have to install anything. You run it right in the browser by entering a URL (although they do have WAVE browser extensions for Chrome and Firefox. They’ve got a great WCAG 2.0 Checklist, organized by the four POUR (Perceivable, Operable, Understandable, Robust) principles. Is it exhaustive? No, but then again, it’s pretty damned thorough. While it’s not blessed as gospel, it’s a really great resource to use to see where the gaps are. The freaking developer resources here are incredible, too.
Collaborations & Collections
But remember — Just because you can, doesn’t mean you should (looking at you, carousels).
Accessible Drag and Drop
- Color Contrast Analyzer
- “I want to see like the colour blind”
- Color Safe
- Accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
- Color Tool
- Web page that allows you to insert your color palette and view accessibility information.
- Sim Daltonism
- Free Mac OS app that lets you visualize colors as they are perceived with various types of color blindness.
- WebAIM color contrast checker
- Simple foreground vs. background checker.
- Accessibility Developer Tools
- Is a Google Chrome extension that adds a tab to your developer tools to run a scan/audit of your current page.
- ARIA validator
- Google Chrome extension that adds a button at the top of the browser that, when clicked, will scan and audit ARIA usage.
- Functional Accessibility Evaluator
- Developed by the Disability Research and Educational Services at the University of Illinois at Urbana-Champaign
- Learn more about the tool
- HTML CodeSniffer
- Also has a bookmarklet for quick scans on any web page.
- Works as a Chrome DevTool, CLI, or node module
- Will check for accessibility issues along with performance issues, best pratices, and if the site is a progressive web app
- They have a lot of open source tools.
- Google Chrome extension that adds a button at the top of the browser that, when clicked, will scan/audit your web page.
- They offer premium services.
- Google Chrome extension
- Both the file and the extension will add a button to the bottom of your page that, when clicked, will show you the results of a scan.
- Google Chrome extension
- Both the main tool and the extension will scan/audit your site and show you results.
- They also have a premium API.
- List of available screen readers from the American Foundation for the Blind
- Free Open-source screen reader. Only works with Microsoft Windows.
- Works well with Firefox. Can be installed as a portable app on a thumb drive.
- VoiceOver for Mac (about it) and how to enable it
- Screen Reader Survival Guide
There are two types of books here: books you need when you absolutely have to have the shortest distance between problem and solution, and books to read and absorb when you have the time to learn more. Each has their place in your bag of holding.
Critical Acting for NOW
- Accessibility for Everyone, by Laura Kalbag (A Book Apart). IF YOU ONLY HAVE A BUDGET FOR ONE ACCESSIBILITY BOOK, THIS IS IT. It’s seriously… well, accessible.
- Don’t Make Me Think, by Steve Krug — my usability bible. Short and sweet, this book shows you why it’s important to do usability testing and is still short enough to read on a plane ride, but now the examples are from the 21st century,
- Rocket Surgery Made Easy, also by Steve Krug — my usability testing bible, this book tells you exactly how to perform usability tests, complete with examples on Krug’s site, www.sensible.com.
- Design for Real Life, by Eric Meyer and Sara Wachter Boettcher (A Book Apart). Because you really need to understand about stress cases and designing with compassion.
- Color Accessibility Workflows, by Geri Coady (A Book Apart). Color and accessibility; they aren’t always friendly collaborators. This ebook is a great option to discover how to address that.
Design Thinking and Deep Dives for LATER
- A Web for Everyone – Designing Accessible User Experiences, by Sarah Horton & Whitney Quesenbery (Rosenfeld Media). If I had to recommend one place to start, this is it, largely because this book touches on everything at a very basic level. When your content is accessible to everybody everywhere, then you have something to build upon.
- The User Experience Team of One — A Research and Design Survival Guide, by Leah Buley (Rosenfeld Media). Almost everyone I know in higher ed is an Army of One — the go to person that has to wear all the hats. This book gives you the tools and insights to do more with less (note that line is in their copy, but frankly I couldn’t really say it better than they did).
- Content Everywhere — Strategy and Structure for Future-Ready Content, by Sara Wachter-Boettcher (Rosenfeld Media). The extended how to and why behind future ready content. Also, because frankly Sara Effing Wachter-Boettcher.
- Managing Chaos — Digital Governance by Design, by Lisa Welchman (Rosenfeld Media). Because, SERIOUSLY, governance. Get some.
- Designing for Emotion, by Aarron Walter (A Book Apart). Lots of case studies, psychological concepts, and scientific data that will help you create accessible and real connections to the people who use your sites and applications.