This is a post for busy designers and developers who would like to get an overview of Accessibility design and some quick tips. Last month, two of my colleagues and I conducted an accessibility workshop to developers and designers who work on Canadian government sites. I presented on Designing for Accessibility, which I included the slides below. While preparing for the presentation, it opened my eyes to the world of disability and taught me an important lesson as a designer that: Good Design Enables and Bad Design Disables.
In particular, I’d like to share with you the following key points:
- Good design principles apply to people with or without disability. For example, providing a clear and consistent navigation structure will help people to find what they are looking for faster. This is especially important for people with motor and cognitive disability. Check out the examples in my presentation and make sure your design is usable to general public first.
- There are special design considerations you need to know to achieve great accessibility. In addition to general usability, people with disability require some additional design consideration. The high level principles are called out in WCAG. They are: Perceivable, Operable, Understandable, and Robust (i.e. the POUR principles). Details are in slide 14. For instance, for people who are blind, they can’t perceive visual information such as graphics, layout, or color-based cues, so you need to make sure to include text description to those information. In addition, they probably can’t use mouse easily, keyboard access is critical to make your application operable. For people who are color-blind, you don’t want to make color the only way of conveying important information such as status change. Design tips for each type of disability is included in the presentation.
- Accessibility is part of usability and you don’t need a separate process to design for it. Make sure you integrate accessibility design into your current design process and make it a priority throughout the development process. For example, when you create personas for your web project, check out W3C’s accessibility personas on how disabled people user web. Include accessibility personas specifying disability conditions and Assistive Technology information for the type of personas.
- Empathy is the key to design for accessibility. If there’s one thing you remember when designing for accessibility, it is EMPATHY. We need to understand how people with disability use software and their pain points. If you haven’t used a screen reader, try it. It’s a really eye-opening experience. Listening to them, trying to experience what they are going through, and understanding their culture will help us be empathetic and put on the accessibility lenses when designing.
Here’s a list of resources where you can learn more about designing for accessibility:
- Web Accessibility in Mind: http://webaim.org/
- Personas: http://www.deyalexander.com.au/resources/uxd/personas.html
- Effective Color Contrast: http://www.lighthouse.org/accessibility/effective-color-contrast/
- Bad website design examples: http://websitesthatsuck.com/
- How People with Disability Use the Web: http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
- Accessibility Color Wheel: http://gmazzocato.altervista.org/colorwheel/wheel.php
- Contrast Analyser: http://www.paciellogroup.com/resources/contrast-analyser.html
- Color Doctor: http://www.fujitsu.com/global/accessibility/assistance/cd/download.html
- Vischeck: http://www.vischeck.com/vischeck/vischeckURL.php
Check out my presentation and put on your accessibility lenses today!