7 Things Every Designer Needs to Know about Accessibility
Created time
Feb 11, 2023 05:55 PM
Author
medium.com
URL
Status
Genre
Book Name
7 Things Every Designer Needs to Know about Accessibility
Modified
Last updated December 26, 2023
Summary
7 Things Every Designer Needs to Know about Accessibility is an essential book for any UX designer to read. It covers the importance of accessibility and how to design a successful user experience without excluding those with different abilities. Key learnings from this book include:
• Understanding how accessibility influences design decisions
• Having an understanding of UX principles and techniques to make a product more accessible
• Knowing how universal design can create experiences that can be used by people with a wide range of abilities
• Being aware of WCAG standards and guidelines
This book is ideal for UX designers as it dives deep into designing a successful user experience with accessibility in mind. Other books that may be of interest for UX designers are Universal Design for Web Applications and Design for Real Inclusion.
✏️ Highlights
As you read through these guidelines, consider that we don’t want to design for our design peers.
Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design.
Design for the diverse set of users who will interact with your products. Design for everyone.
Design for people who are young, old, power users, casual users, and those who just enjoy a quality experience.
Embrace these accessibility guidelines as you would any set of design constraints.
Use color to highlight or complement what is already visible.
According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to
According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to
According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1.
Provide visual focus indication for keyboard focus.
Let’s now take a moment to blame reset style sheets for playing a role in one of the most widespread accessibility blunders on the Internet. :focus {outline: 0;} This single line of CSS makes it nearly impossible for a sighted user to use a website with just a keyboard. Fortunately, since the initial CSS resets were released, many popular ones including Eric Meyer’s have been updated to remove un-​styling of the :focus pseudo-​class.
It’s easy enough to dislike the grey dashed border focus on IE and Firefox or the blue halo in Chrome.
The problem is, most websites do not create their own focus styles. These focus indicators, which are fundamental to the success of keyboard users, are largely absent on the web.
If you’re on a Mac, you may need to enable Full Keyboard Access under System Preferences > Keyboard > Shortcuts. It’s at the bottom. If you remove default focus, replace it with something that is *better* than what your browser provides.
When providing your own focus states, just be sure to remove the default state so that you don’t get something looking like this example where Chrome’s blue rectangle overlaps this menu’s blue pill.
Clearly defined boundaries for form fields are important for users with mobility impairments and those with cognitive disabilities.
Where does one click to tell their story? Here is the same screen shot with a blue rectangle added to show the boundaries of the text area.
If you click anywhere below this region, nothing happens.
accessible way of designing the Price compound field shown above. We will see the labels, min and max, even after we fill in the fields.
These ARIA attributes instruct screen reader users on how to interact with a component when using the keyboard.
The example below is an autocomplete with an identity crisis. Not only can the user filter and select an item from a list, they can choose to edit or delete each list item by clicking on the pencil or trash can icon.
As you read through these guidelines, consider that we don’t want to design for our design peers.
Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design.
Design for the diverse set of users who will interact with your products. Design for everyone.
Design for people who are young, old, power users, casual users, and those who just enjoy a quality experience.
Embrace these accessibility guidelines as you would any set of design constraints.
Use color to highlight or complement what is already visible.
According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to
According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to
According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1.
Provide visual focus indication for keyboard focus.
Let’s now take a moment to blame reset style sheets for playing a role in one of the most widespread accessibility blunders on the Internet. :focus {outline: 0;} This single line of CSS makes it nearly impossible for a sighted user to use a website with just a keyboard. Fortunately, since the initial CSS resets were released, many popular ones including Eric Meyer’s have been updated to remove un-​styling of the :focus pseudo-​class.
It’s easy enough to dislike the grey dashed border focus on IE and Firefox or the blue halo in Chrome.
The problem is, most websites do not create their own focus styles. These focus indicators, which are fundamental to the success of keyboard users, are largely absent on the web.
If you’re on a Mac, you may need to enable Full Keyboard Access under System Preferences > Keyboard > Shortcuts. It’s at the bottom. If you remove default focus, replace it with something that is *better* than what your browser provides.
When providing your own focus states, just be sure to remove the default state so that you don’t get something looking like this example where Chrome’s blue rectangle overlaps this menu’s blue pill.
Clearly defined boundaries for form fields are important for users with mobility impairments and those with cognitive disabilities.
Where does one click to tell their story? Here is the same screen shot with a blue rectangle added to show the boundaries of the text area.
If you click anywhere below this region, nothing happens.
accessible way of designing the Price compound field shown above. We will see the labels, min and max, even after we fill in the fields.
These ARIA attributes instruct screen reader users on how to interact with a component when using the keyboard.
The example below is an autocomplete with an identity crisis. Not only can the user filter and select an item from a list, they can choose to edit or delete each list item by clicking on the pencil or trash can icon.
