Refresh Detroit’s fourth annual Global Accessibility Awareness Day event was a smashing success!
We were fortunate to have two speakers from event sponsor Deque Systems, a leader in accessibility software and testing. UX designer Caitlin Geier started us off with her five keys to designing for accessibility.
Five Keys to Designing for Accessibility
Designers play a critical role in the development of accessible experiences. Here are Caitlin’s top five tips for accessible design.
Key #1: Understand Usability
Begin by asking whether your design is usable. Accessibility is a subset of usability—compare Nielsen’s 10 Usability Heuristics with the Web Content Accessibility Guidelines that underpin accessibility testing.
Key #2: Understand Your Users
Get to know your users, and find out what tools they’re using to access your content.
It’s likely that at least 15–20% of your users have some kind of disability, but everyone will experience disability at some point in their lives. Remember that accessible design also improves user experience for people who aren’t currently disabled.
Wear your users’ shoes: navigate your website using only a keyboard, for example, or work outside on a sunny day to experience the challenge of working with reduced visual contrast.
Install and use the NoCoffee extension for Chrome to simulate a range of visual impairments within your browser.
Key #3: Work With Your Team
You are not a silo. Accessibility is everyone’s responsibility, and everyone has a role to play.
Involve your whole team in the process. Keep in mind that as design fidelity increases, the cost of correcting errors increases proportionally, so try to catch accessibility issues early.
Key #4: Understand the Tricky Bits
Some aspects of accessible design seem pretty straightforward, but others can trip you up if you’re not careful. Pay particular attention to elements that display a lot of information, and elements that involve a lot of interaction.
Forms
When designing forms:
- Have a label for each field, and make sure that it’s always visible.
- Use help text where appropriate, rather than waiting for validation to display an error.
- If you need to display an error message, make sure it’s descriptive.
Custom Controls
Some tips on custom controls:
- Rely on the built-in HTML elements as much as possible. They’ll save you a lot of work.
- That said, watch out for the HTML5 date element. Browser support is inconsistent, so you may be better off integrating a custom date picker.
- If you have to implement something that’s not available as a standard element, see what’s already available: someone has probably shared an accessible version of whatever you’re building. Be sure to test it to confirm.
Dynamic Content
When working with dynamic content, test extensively to ensure that you’re striking the right balance between too little and too much information.
Key #5: Use Style Guides & Pattern Libraries
Have you done the work of designing, building, and testing accessible components? Great! Save them, and reuse them later.
If you need some examples to get started, take a look at the U.S. Web Design Standards, or Salesforce’s Lightning Design System.
Bonus: Tips for Developing Accessible Mobile Apps
In some ways, developing mobile apps can be easier than developing for the web, but there are still some things to watch out for. In particular:
- Screen readers for mobile devices tend to be touch-controlled, so be careful not to rely on gestures that conflict with the operation of a screen reader.
- Many screen readers have a “touch to explore” mode. Whenever possible, ensure that controls span the entire width of the screen so that users can access them effectively.
- Finally, pay attention to touch target sizes. Like many accessibility best practices, this benefits everyone. Make it easy for people to interact with your app.
Accessibility begins with design, but it doesn’t end there. JavaScript developer Matt Isner picked up where Caitlin left off, introducing the audience to accessibility testing with aXe.
Introduction to aXe
Matt demonstrated several ways to integrate automated accessibility testing into development and testing workflows.
The aXe Browser Extension
Looking for a quick way to get started with aXe? It’s as easy as installing the aXe browser extension for Chrome or Firefox. Open up your developer tools and look for the newly-added aXe tab, then select “Analyze” to check the page for accessibility violations.
Remember that aXe is designed to inspect only the current state, so be sure to expose your entire interface: re-run the analysis with drop-down menus open and closed, expandable content sections collapsed and expanded, and so on.
aXe-Core, axe-WebDriverJS, and aXe-CLI
Developers who want to integrate aXe more directly into their development workflow can install aXe-Core and include it in their test fixtures.
aXe-WebDriverJS provides a chainable aXe API for Selenium’s WebDriverJS, while aXe-CLI allows for easy command line access to run aXe tests from anywhere.
Automation is Only Part of the Story
Matt noted that “less than half” of accessibility issues can be caught by automated testing, but the sheer volume of violations in most applications means that automated testing is still well worth your while.
There’s additional value in being able to incorporate testing directly into your workflow, rather than trying to tack it on at the end.
aXe works hard to avoid false positives, so you can be confident that the issues it flags are worth paying attention to. Still, you should plan on supplementing your automated tests with manual accessibility testing.
Try browsing your site using just a keyboard, or using a screen reader, and be sure to test it out with real users!
Want the Whole Story?
Matt and Caitlin’s presentations can be found online; Caitlin’s slides are on Slideshare, Matt’s slides are on Github.
Thanks again to Caitlin, Matt, and the whole Deque team for helping to make Global Accessibility Awareness Day a success!
Shoutout to Bamboo Detroit for hosting our event at their coworking space.
Check out a few photos from our event:
Refresh Detroit 