Designing for Accessibility

Digital inclusivity is crucial, particularly for those with disabilities.

While this sometimes is an afterthought in the design process, it needs to be an essential aspect of your experience.

Secure a place at the forefront of your design process for all users.

There are a few key principles for accessibility which we’ll go over.

Perceivable

Ensure that your design is accessible and interpretable to all users, regardless of how they are accessing your product. This can be achieved by:

providing text alternatives for non-text content,
responsive layouts and design, and,
clearly distinguishable elements.

Operable

Your product has to be navigable and usable to people with different abilities. Key considerations include:

sufficient timing for reading and navigating,
not designing content that could cause seizures or trigger motion disorders, and,
providing ways to help users navigate and find content.

Understandability

Information and operation of the user interface must be understandable. This includes:

readable text content,
use of plain language, and,
predictable and consistent website operation.

Robust

The design should be sufficiently robust that it can be interpreted reliably by user agents, including assistive technologies like screen readers. Consider how your product might be used by someone who cannot operate a conventional keyboard and mouse, or a touchscreen.

Recommended resources for accessible design:

WCAG. A wide range of recommendations to make web content more accessible. The massive checklist can be daunting - so try looking through a couple of requirements at a time.
Cards for Humanity. An online resource to help you consider how different people in varying contexts might need unique support from your product.
Google Lighthouse. An automated accessibility auditing tool built by Google for quickly checking the accessibility of your website or app.
taba11y. A web browser extension which visualises the tab order of a website or app so you can check for any potentially annoying mistakes in the flow and resolve them.
Andi. An accessibility auditing browser extension that can help you diagnose accessibility issues with websites and apps.

‍

An example of an automated accessibility test using Google Lighthouse in Chrome

‍

Also, make sure you test your interface with various assistive tools and include people who rely on these tools in your user testing. Automated testing is a good first step, but nothing beats a manual run-through.

Creating an accessible design doesn't only open your product to a larger audience; it also improves the general user experience. It forces you to consider your design decisions more carefully, often resulting in a more straightforward, more intuitive user experience.

Everyone benefits from inclusive design. It's a win-win. Consider an automatic door. It’s essential for someone who can’t physically push or pull the door, but it also makes entering or exiting a building a lot easier when you’re carrying shopping, or holding your child.

Actionable Steps