A practical guide to accessibility for designers
Accessibility (a11y) means creating experiences that include considerations for users with low vision or no vision, users that require a screen-reader to access interfaces, and users with other impediments including lower cognitive ability or motor skills.
Impairments may be permanent; like blindness, may be temporary; like a broken arm, or may be situational; like distracted driving.
I’ve found that the road to adopting accessible design standards is a journey. Having found this article, I assume you’re already convinced that designing accessible products is non-negotiable. If you aren’t yet convinced, I highly recommend skipping this article and reading a fantastic article by Cat Noone instead. This article is a practical guide to the basics that a designer should be thinking about and testing for when creating a digital experience.
I should note that WCAG offers a set of guidelines for engineering and for design but the examples in this article only cover basic design issues.
The four principles of accessibility
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Operable
User interface components and navigation must be operable. This means that users must be able to operate the interface.
Understandable
Information and the operation of user interface must be understandable – the content or operation of the interface cannot be beyond users’ understanding.
Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
1.3.3 — Sensory characteristics
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
If you’re using a screen reader, there’s no such thing as “on the right.”
1.4.1–Use of color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Imagine you’re red-green colorblind and you’re shown two results, one negative and one positive, and the designer craftily made the text of one red and the other green. You have no way to differentiate between the two types of result. More commonly, imagine that links on a site change color when you hover. Without another, more obvious, indicator, it’s hard to tell that the link is functional.
1.4.3–Minimum Contrast
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large text which requires a contrast ratio of 3:1.
Have you ever noticed how difficult (impossible) it is to use some apps when you’re using your phone in bright sunlight? For many people this is what their experience is even when they’re in ideal lighting conditions. Designing for minimum contrast is really a no-brainer. There are tons of tools to help you test your designs (I really like the Stark plugin for Sketch), and every one of your users will see an immediate benefit.
2.1.1–Keyboard
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.
Try navigating your product with just a keyboard. If you have modals, or custom controls, or menus that appear, you’ll quickly find that there are areas that you can’t access. You’ll likely also find there are areas where you’ll get trapped with no way to exit. Most of the heavy-lifting in making a product keyboard-navigable will fall on the engineers, but it’s best if you know these issues and consider them when you’re designing. Use standard controls whenever possible. Don’t use a modal unless there’s a compelling reason. Making your product easy-to-use with only a keyboard benefits users with physical and motor-skills impairments, and it also benefits power users.
2.4.4–Link Purpose (In Context)
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
This is another very simple guideline that will make life better for every one of your users. Are you linking to the sign up form? Then the button should say “Sign Up” or “Continue to Sign Up” or something similar that reveals to me what’s hiding behind that metaphorical door. For users that navigate with a screen reader or Voice Over, they don’t generally read the paragraphs of text. They’ll move from headline to headline, to anchor, etc. Guess what. That’s how all of your other users digest your product too. They don’t read those long-winded paragraphs. They’re looking for keywords that will get them what they’re after.
3.2.4–Consistent Identification
Components that have the same functionality within a set of Web pages are identified consistently.
If you have a down-facing caret in your primary navigation that indicates there is sub-navigation under that item, users will will learn that pattern. When the user is looking at frequently asked questions and sees a plus sign, he then has to learn that pattern. Both are meant to signify that they are clickable and will reveal additional, deeper-level content, and probably should use the same icon.
3.3.2–Labels or instructions
Labels or instructions are provided when content requires user input.
When you use the placeholder element to inform the user of the expected content for a text input, it’s invisible to a screen-reader. It’s also invisible to everyone else after they’ve focused the field. So, always use the label element. Further, that element should describe the format the user should use (eg. 123–45–6789) and the label should tell the user if it’s a required field.
Conclusion
These are a few simple rules to make your designs more useable for people with limited capabilities (and everyone else!). It takes effort and commitment to make a product fully-compliant with accessibility standards, but it’s a noble pursuit. Even if you never get to 100%, every little bit has a great impact on your users, especially those with limitations or disabilities.
Promoting a11y is a great passion of mine and I’d love to speak to your team about it if they’re in need of an accessibility kickstart. Reach out to me and I’ll do my best to get to your office, provided you’re in the SF bay area.
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
