“What information does the user need to use this feature?”
It’s a question that Handshake’s product design team asks themselves every time they add a new button or call to action to the college career network’s website. The answer isn’t always as obvious as one might think.
While we often associate terms like “UI” and “UX design” with aesthetically pleasing features, accessibility plays an important role in implementation and overall user experience. Take, for example, visual cues for required navigation. Lead Product Designer Body Taing, who works at healthcare platform Doximity, says such features aid users who have visual impairments. Below, he and Product Design Manager Molly Garber explain how they create context for viewers and prioritize usability.
“It is a designer’s job to have empathy for all users’ experience,” Garber said. “But getting accessibility right is a team effort.”
At Doximity, the connection between the healthcare provider and patient is a top priority. While adding a new button on the interface might create an actionable element, it could remove focusable keywords from assistive screen readers, which some patients rely on. In addition to ensuring his team’s work features clear language, Lead Product Designer Body Taing cautions against adding elements that lack context.
What are the key best practices your team has in place when it comes to accessibility?
We try to put ourselves in the users’ shoes. We focus on workflows and how we can make our products more usable for our audience. Web Content Accessibility Guidelines (WCAG) compliance, which is a part of a series of accessibility guidelines, is built into our design process. We sweep designs for contrast compliance and accessible text sizes in our prototypes.
We try to put ourselves in the users’ shoes.’’
Share a few examples of what accessible UX/UI design looks like in your team’s work.
Modern web applications can often create actionable elements, such as links or buttons, with JavaScript. While this is convenient, it can remove focusable elements from keyboards and screen readers.
With that in mind, we’ve added visual cues for focusable interactions. This aids users who have visual impairments. We’ve also integrated WCAG guidelines into our design reviews, code reviews and automation tests to ensure that we’re meeting guidelines now and in the future.
What are some common missteps you see UX/UI designers make when it comes to accessibility? And what can designers do to avoid them?
The most common accessibility design mistakes can include a lack of contrast in readable elements such as text or buttons. Designers can be tempted to appeal to aesthetics and forget about usability. Sweeping designs through a contrast checker or adding automation tests can greatly improve the outcome.
Screen readers help users consume information differently. Often, designers forget to purposefully exclude objects such as decorative images, ancillary items and repetitive content. Not providing exclusions can overwhelm screen readers. We’ll typically remedy this issue by creating design components with built-in WCAG and HIPAA compliance rules.
Lastly, designers often use language that is too simple or lacks context. For example, “join” may be an appropriate word to use in a form where the user can consume all other relevant information. However, a screen reader user may need to consider the action as it relates to what happens next. In this situation, we’ll provide additional, screen-reader specific labels like the following: “Join the call and wait for your doctor.”
Human beings constantly communicate using visual information. Handshake Product Design Manager Molly Garber says that it’s her team’s job to make all product and feature information accessible to users in other ways, too. That’s why they use Figma and Mac plugins to ensure the networking platform meets WCAG-AA contrast ratio requirements, among other industry standards.
What are the key best practices your team has in place when it comes to accessibility?
At Handshake, our mission is to democratize opportunity for all students. Accessibility plays a huge part in creating equal opportunities. We believe that creating accessible products is everyone’s responsibility, not just a box to check in a design review.
Building inclusive products starts with considering the areas of our experience that might be different for students who will need alternative workflows. In the design process, we thoughtfully consider type sizes to ensure legibility. We use Figma and Mac plugins to make sure we are meeting WCAG-AA contrast ratio requirements.
We believe that creating accessible products is everyone’s responsibility, not just a box to check in a design review.’’
Share a few examples of what accessible UX/UI design looks like in your team’s work.
Our engineers lead the charge to make sure we are considering all use cases. They own the implementation of most of our accessibility. When developing accessible features, we find it important to ask ourselves the simple question, “What information does the user need to use this feature?”
It is second nature to us to be able to communicate information visually. We understand that five checkboxes grouped together are related, that the text next to a checkbox is its label, and that a checkbox with a “X” in it means that it is selected.
However, not all users can rely on this visual communication. We need to be able to inform a user through a screen reader that the input is in fact a checkbox, not a radio button or button. We need to inform the user if the box is checked or unchecked, and even what the option associated with the checkbox says. We communicate a lot of information visually without thinking about it. Before writing any code, we must take a step back and determine what that information is, because it can influence how we develop the feature.
What are some common missteps you see UX/UI designers make when it comes to accessibility? And what can designers do to avoid them?
Designers often think of accessibility as a simple box to check. It is important to consider what designers can control, like contrast ratios –– but also what they need their cross-functional partners to own. Using simple contrast tools will help you reach ratios to check color contrast. It’s important to keep in mind that the guidelines for contrast don’t take legibility into account. So even if you find a text and background color that technically meets standard contrast, it might not always be easy to read.
It is a designer’s job to have empathy for all users’ experience. But getting accessibility right is a team effort. In order to make a truly accessible product, designers need to get their product and engineering partners to build in time for accessibility features. To support screen readers, you must include both content and engineering in the process.
Designers should consider the flow and order of tabbing through elements on the screen and demonstrate this order to your developers. If a designer is confused about how to achieve a successful screen reader or tabbed experience, ask your engineers. They will be able to guide you through writing labels and deciding the tabbed order for users. Lastly, building accessible products is always changing and growing; don’t let the fear of not getting it right keep you from trying.
