Think accessibility should be the last consideration in the design process? Think again.
People with disabilities aren’t a small minority in the United States. According to a 2018 survey conducted by the U.S. Census Bureau, there are more than 31 million Americans over the age of 18 who suffer from cognitive, vision or hearing difficulties; disabilities that can prevent people from using technology the way it was designed.
As such, accessibility should act as the starting point for product design, rather than shoehorned in as a consideration during the process.
“Tools that are accessible and universally designed treat accessibility as a foundational element,” Faith Kim, senior product designer at dscout, said. “It’s going to be more difficult to retroactively make features and experiences accessible, so accessibility must be at the forefront when designing new things and evaluating features.”
Yet, ingraining accessibility into the design process can feel like an onerous task, especially for those who have yet to incorporate them into their workflows. Will Moran, associate director of design at Adage Technologies, has found success in implementing accessibility considerations in steps, rather than all at once, because of the topic’s sheer complexity.
“Accessibility implementation takes testing, research and practice, so plan for that extra time,” Moran said. “Being inclusive and accessible is a process.”
It’s all to say that there’s no right or wrong way to go about making accessibility a part of your design process — as long as you do incorporate it. In interviews with Built In Chicago, Kim and Moran explained the accessibility best practices they’ve implemented at their companies, the projects that have put accessibility at the forefront, and the advice they have for fellow design professionals looking to make their process more inclusive.
What they do: dscout’s research platform helps customers gather, manage, share and analyze millions of in-context moments submitted by people around the world.
What are the key best practices your team has in place when it comes to accessibility?
As a full-stack team, we have a shared agreement and dedication to building accessible experiences. It’s not just one of our responsibilities — we share ownership in each of our distinct product and engineering roles. This ensures that we’re surfacing and addressing accessibility at all points of a project’s development.
We work to create a product that can be experienced in many ways, ensuring there are alternative methods of completing a task or interacting with elements. This could mean accommodating a screen reader, making an interface usable by keyboard-only, or providing supporting information for our features.
Additionally, when one-off accessibility issues arise, we think of a holistic approach that could solve the issue indefinitely rather than just for the specific instance. For example, we recently had some platform-wide color contrast issues that we recognized would be best addressed by changing colors throughout our design system. If your product is built with a design system, you’ll have patterns that persist throughout. The dscout team works to solve accessibility issues from the beginning to set us up for success in the future while also solving for the present.
Share some examples of what accessible UX/UI design looks like in your team’s work.
Our team built a feature earlier this year that employed a drag-and-drop interaction. It was supposed to be a mouse-based interaction, which isn’t a universal and accessible experience for everyone. I was hesitant to support it at first, but we made sure to build an intentional alternative experience so that a user could still fully interact with the feature without a mouse or trackpad. Taking the time to evaluate the interactions you’re supporting is key in recognizing who can use them.
Accessibility doesn’t always manifest in a direct visual way. Our team made sure to add ARIA labels to important elements so that screen readers could accurately communicate what is present on a platform page. This is an example of accounting for the unseen. You’ll never see an ARIA label, and it doesn’t necessarily need explicit design work, but it still matters how it’s written since it will be read aloud.
The dscout team works to solve accessibility issues from the beginning.”
What are some common missteps you see UX/UI designers make when it comes to accessibility? What can designers do to avoid them?
-
Treating accessibility as an independent step. Tools that are accessible and universally designed treat accessibility as a foundational element. It’s going to be more difficult to retroactively make features and experiences accessible, so accessibility must be at the forefront when designing new things and evaluating features.
-
Not making the effort to build the habit. Accessibility knowledge and designing universal experiences can be challenging when you’re first starting out. It’s hard to build a new habit, especially since most of us don’t have formal accessibility training or knowledge. It takes time and effort to solidify new knowledge into practice, so keep flexing the muscle and eventually, it will become second nature in your design process.
-
Thinking it’s only your problem to solve. While design is often at the beginning of the product development lifecycle, you can still ask your teammates for help. They have the expertise to help you think outside of the box. Call out what’s not accessible, or what you’re struggling with, and problem-solve together to make an experience the best it can be. Your teammates are there to be partners in making a great product for everyone.
What they do: Adage is a web design and development firm that develops engaging e-commerce experiences. The company specializes in adtech strategy, web development and marketing services.
What are the key best practices your team has in place when it comes to accessibility?
-
Create a shared understanding of what being inclusive and accessible means to your stakeholders, users and organization to develop a framework for goals, expectations and implementation. There is a lot of flexibility within the rules of accessibility and we should be prepared for change and advocate for it where we can.
-
Accessibility implementation takes testing, research and practice, so plan for that extra time. Keep up to date with new tools and best practices to ensure you’re recommending the best approach for compliance.
-
Work with your users, stakeholders and developers to make sure proposed solutions can meet accessibility requirements and make changes where necessary.
-
Content writing, structure, population and maintenance have a large effect on accessibility and inclusivity and should be considered at all steps of the research, design, development, content creation and publishing process.
-
Being inclusive and accessible is a process. Plan steps for implementation and don’t try to take them on all at once.
Share an example of what accessible UX/UI design looks like in your team’s work.
Accessible design was a key component in our work for the Metropolitan Opera and The Kennedy Center websites. Both sites conform to AA-level criteria for Web Content Accessibility Guidelines (WCAG), an international standard that explains how to make web content more accessible for people with disabilities.
Being inclusive and accessible is a process.”
What are some common missteps you see UX/UI designers make when it comes to accessibility? What can designers do to avoid them?
-
Misuse of common elements like buttons or links, and unclear UX writing can make it difficult to navigate a website. Buttons should submit a form or change the interface in some way, and links should be used to navigate to other pages. Use descriptive copy for links and buttons that reflect the action being taken or the page to which the user is going (which also helps your SEO). Avoid hiding things like titles, buttons or links in hover states that a user might need access to without a mouse.
-
Reliance on text within an image or graphic to convey a message or a link can cause issues because screen readers cannot capture text within an image. Instead use text to convey the message, accompany images with alt text and create appropriate links. Color and font choices can be problematic if there’s not enough contrast or the text is too small. Use accessibility checkers to make sure color contrast for text and interactive elements is compliant, and make sure paragraph typeface is at or above 16px for better legibility.
-
When in doubt, stick to well-tested, researched and understood UX patterns to ensure clear usability. Anything that may seem out of the norm should be tested first.
