Designing for Accessibility: An Introduction

Designers and developers often view accessibility as an add-on feature, something that can be done later if there’s extra time. But for those that depend on accessibility features, that view is shortsighted and hurtful. In many cases, accessibility determines whether some users can even read or use our products. We don’t have to treat accessibility as an afterthought. With just a few changes to your normal workflow and a little more awareness, designing for accessibility can become not only second nature, but a powerful force for improving your design for everyone.

Why? Why not.

Accessibility doesn’t just benefit people with specific disabilities, it improves the usability of a website for everyone.

— Laura Kalbag, Accessibility for Everyone

It’s easy to think of those needing accessibility features as somehow “other” than ourselves, but that’s the wrong way to think of it. How many times have you heard or thought, “Do we really need to consider these users? Do they even use our product?” Well, if you don’t consider them, then it’s highly likely they won’t. And plenty of other users will lose out as well.

Here’s an open secret: everyone benefits when things are designed accessibly. Designing for accessibility is just designing for better usability. Designing for increased contrast helps people with poor vision, but it can also help when allergies flare or when reading in bright light. Increasing the clickable hit box on an element helps those with poor mobility, but it can also increase conversions. Providing text alternatives for images and icons helps not just blind users but also search bots and users with slow connections. Offering captions isn’t just helpful for deaf people, but also those in loud environments or who need to watch something on mute. The list goes on and on.

Microsoft has a wonderful site on Inclusive Design that includes helpful guides and activities to help better illuminate why designing for accessibility is important for everyone. Their persona spectrum concept showcases how the same solutions that benefit permanently disabled people also help people with temporary and even situational disabilities.

Microsoft’s Inclusive Design site showcases the Persona Spectrum, which highlights how permanent, temporary, and situational disabilities are all interrelated.

As we consider the entire spectrum of possibilities, the benefits to the people we are designing for goes up dramatically. Accessible design is usable design, for more people in more circumstances. Designing for accessibility from the start benefits everyone in the end. With that in mind, let’s look briefly at the principles behind accessible design to better understand them.

Principles of accessibility

The World Wide Web Consortium (W3C) is a global community that develops the standards we use to build the web. They have defined standards for accessibility in the Web Content Accessibility Guidelines (WCAG). These standards are based on four foundational principles:

• Perceivable: Can the user obtain information that’s presented? Can they discern what elements are interactive? Are there multiple methods for examining content, particularly images, video, and audio? Is content easy to distinguish? Is there enough contrast between background and foreground colors to read easily? Is meaning conveyed through more than just color?
• Operable: Can the user interact with elements using different types of input? Are interactive elements accessible by keyboard? Is the navigation and flow logical and well-labeled? Can the user easily locate where they are on the page, app, or site and get to other parts easily?
• Understandable: Can the user grasp the content? Is it written in plain language with any jargon and abbreviations defined? Is there context-sensitive help text for more complicated interactive elements? Do error messages provide clear instructions? Are navigation and interactive components consistently identified?
• Robust: Can content be reliably interpreted by different browsers and devices? Is it developed in valid code using semantically correct elements?

Introducing the Design A11y series

Now that you have a better understanding of why accessibility is important for all of your users, let’s dive into the specifics of how to design with accessibility in mind and become a design a11y. (Accessibility is often abbreviated as a11y because there are eleven letters between the first and last letter. Also because a11y looks like ally, and that’s just awesome.) I’ve broken the topic into four areas:

Follow along on Twitter, RSS, or by subscribing to the monthly newsletter if you want reminders when each article in the series is published.

Originally published on March 24, 2018 at uxcellence.com.