The best products integrate seamlessly into our everyday lives. We don’t have to think about how they work because they just… work. This ease is not always experienced by a subgroup that product designers often neglect. 1 in 5 Americans are living with a disability that changes how they interact with products. This has led to 800+ accessibility lawsuits in federal and supreme courts in 2017. As designers, we hold the power to define and gain a deeper understanding of the user to curate these products to work for them. Designing with accessibility in mind not only helps your product perform better but helps those with disabilities use digital products as easily as you and me.
Product Designers often maintain strict deadlines to get their work out the door. This culture of shipping fast doesn’t leave designer time to ask important questions about accessibility. Am I thinking about EVERYONE using this product? Allowing ourselves time to slow down and think about accessibility early and often makes accessible design an easier task, and elevates the quality of the product.
Taking steps towards designing for accessibility can be easier than you might think. These three general themes can help ensure you as a designer are frequently accounting for accessibility throughout your creative process.
Create Structure
Building structured digital products starts before the first pixel is pushed. The most important approach to creating this sensible scaffolding within the product is to be predictable. Consumers share a mental model of how the product should work. This predictability eliminates confusion for users and creates a natural order that enables alternative browsing methods to be effective. This natural order, or focus order, helps maintain consistency in design and development. Working together to use consistent elements and semantic tags starting in the design phase helps developers easily curate and describe your design.
Over Communicate
Conveying information to people with disabilities can be challenging from a design perspective. There are many ways to create a more descriptive environment for this group. Ensuring that you are overly communicating in your designs is an early step you can take to help overcome the challenge. Don’t just rely on pictures and videos to convey information. Pairing these with additional text and icons decreases the cognitive load of what you are describing. Creating different forms of feedback, a response to any interaction making it both visible and understandable also helps better describe a digital experience. Communicating an action in as many ways as possible will help cover your bases for any consumer type. This feedback can be visual, auditory, or haptic, but to help get the point across using all three or any combination is more successful.
Leverage Technologies
Smartphones give us the ability to create product interactions beyond touching the screen. As designers, we need to be more cognizant of the array of sophisticated sensors within smartphones and utilize them in products to make them more accessible. Accelerometers detect acceleration, vibration, and tilt to determine movement and exact orientation along the three axes. Gyroscopes provide orientation details and direction like up/down and left/right but with greater precision. This technology gives people the ability to utilize different interactions within products allowing different gestural based interactions and voice commands to use apps efficiently, even though they use the products differently.
There are also tools that can help you check for accessibility throughout your design process. These five tools help you simulate a disability, check your design for accessibility, and suggest how to make your designs more accessible.
Stark is a sketch plugin that checks for contrast, simulates color blindness, and gives contrast friendly color suggestions.
Tools to Use
Contrast Analyzer is a plugin that checks if you are being compliant to WCAG contrast guidelines. Choosing two elements within your designs, it will give you a prompt saying how well the contrast fits into these guidelines.
NoCoffee Vision Simulator is a Chrome plugin that can simulate all types of vision disabilities. You can simulate colorblindness, low vision acuity, different types of blocked vision.
tota11y is a JavaScript file that inserts a button in the bottom corner of a document. The button consists of plugins that provide insight to how accessible your site is.
Wave is an online accessibility evaluation tool. You type in a website URL to the sidebar and it immediately returns a list of errors from the site. This can be code errors, structural errors, or contrast errors.
Designers have the power to create an accessible product that can be helpful to people regardless of their physical/mental ability. Thinking about every consumer who might use our product early and often will set you up for success. Creating a sensible structure, over communicating in designs, and leveraging smartphone technology will build a solid foundation for an accessible product from the start.
We would love to hear how you create products with accessibility in mind. Join us on Twitter to keep the conversation going!