Accessibility in UX Design
2 Implementation Stories from Senior Designers
In this article, two experienced UX specialists talk to us about the best practices of accessible design they’ve implemented, as well as share tips on how to make it more successfully
The first thing that comes to mind when there’s a requirement to make something ‘accessible’ is the needs of users with disabilities and how these users interact with a certain product. And that’s true. But, in terms of UX design, accessibility is also about making products that every user can enjoy irrespective of their abilities or the context they find themselves in while using a product.
Accessible design allows users of all abilities to understand, use, and enjoy the web
The popularity of accessible design is growing. But it doesn’t mean every company implements the principles of accessibility in design. A WebAim analysis says that, on average, 1 in every 14 home page elements would result in an accessibility error.
Within the US, a UX designer’s role is to make sure that the 61 million people with disabilities can access and interact with digital products easily. And don’t forget to take into account people with temporary and situational disabilities. Let’s take a look at the disability types illustrated in the image below:
INSPIRED BY MICROSOFT’S INCLUSIVE DESIGN TOOLKIT
Accessibility Standards for a New Design
When we start working on a new project or a new update to a live product, we examine multiple areas, including our brand, components, and overall time available for the project. One area we have expanded on greatly is accessibility and how we can make sure we add time to each project for the quality assessment of the accessibility landmarks we have set up.
Currently, we follow WCAG 2.0. Since we also have a website in Canada, we have to be incredibly diligent about accessibility.
Three Essential Design Accessibility Elements
- Color and size, especially around font styles and graphics. Understanding how small or large your text should be, what color combinations are effective, and establishing styles in advance — these have all been real lifesavers for our team.
- Text readability, if you have a design element that doesn’t work with screen readers — in addition to working on alt-text for images.
- Finally, go through each project for focus indicators by tabbing and making sure that it actually works with the way the site is set up.
As designers, we often only think about those with sight issues when we think about accessibility. But we also have to make sure screen readers are adaptable to the product, and take into consideration people with motor function disabilities that require using a tab. Creating a robust and accessible foundation for every project sets us up for success in the future.
ACCESSIBLE COLOR PALETTE
MADE BY GUILLERMO BECERRA
How Owens Corning Improved Accessibility in Their Designs
Firstly, I found that learning accessible coding in HTML, CSS, Bootstrap, and JavaScript is enormously helpful when creating complex designs. It helps me understand what we need to do to make sure we can successfully launch each product. One area that was a bit of a time-consuming endeavor was footnotes, specifically what symbols to use in addition to where to put them on the page.
Because of focus indicators and screen readers, we had to develop a consistent pattern and system for establishing effective footnotes. A user could bounce from a referenced note to the footnote and go back to the same spot without issue. We also had to consider other languages since we build sites in multiple countries, so we settled on using numbers over symbols as they are universally recognized.
In the end, we created a system that was both accessible and synonymous with our branding, so it was a massive success.
Our Methods of Evaluating Design Accessibility
Whenever we finish a design, or the developers finish a project, we go into accessibility QA where we all chip in and go through our landmarks with different screen readers, browsers, and extensions like the WAVE evaluation tool.
If we need to build new components or designs, we use Stark for color contrast and then our accessibility expert works with us on the concepts to make sure we are going in the right direction.
The First Steps on the Way to Accessible Design
- As UX designers, the first thing we have to do is to leave our egos, thoughts, and opinions at the door. We don’t know everything, and we are not supposed to.
- The next step is to learn accessibility tools. Start by researching how people who are blind, deaf or have motor function disabilities use the internet or various products. Practice using screen readers and focus indicators. It does give you an idea of how frustrating the internet can be if it’s not accessible. And all information should be easily accessible by everyone.
Accessibility Will Never Disappear. And It’s Great!
The internet and all the associated products will continue to get more accessible for everyone. I am so excited to see what happens when we start making full creative systems for accessibility — in fact, the process has already begun. Imagine the possibilities of building fully accessible systems so that people with disabilities can develop their designs or art or products.
I believe that the more inclusive we can be, the more successful we will become in the UX space.
Starting Your Journey to Accessibility in Design
When our team at Dev Labs starts a new design project, we create wireframes and prototypes that can be used by as many users as possible. These prototypes are then used to create UI visuals that follow accessibility standards like WCAG. One of the first things we started with was working with text size, adding enough contrast, and implementing careful use of colors.
Top-3 Accessibility Mistakes You Can Do in Design
- Not using non-descriptive title elements or using illustrations for tricky subjects.
- Making unstructured navigation that makes it hard for screen readers to understand data.
- Adding unnecessary media that can cause distractions.
‘Empathy First’ Approach Is Key in Accessible UX Design
The approach we use to make UX more accessible is Empathy First. We try to understand what technologies people use and how they use these technologies. For example, how they set up their browsers to help them use a website.
More Helpful Resources
Three Accessibility Standards Every Ux Designer Should Know
#1 – Section 508
Defines accessibility standards for federal agencies within the US. It means that any company or private contractor that works on any projects under government funding needs ‘to make their electronic and information technology accessible to people with disabilities.’
Section 508 applies to PDFs, apps, web content, gaming systems, computer software, and emails. You can find the requirements on section508.gov.
#2 – Americans with Disabilities Act (ADA)
The main goal of the ADA is to remove common accessibility barriers to interacting with information and electronic tech. It covers issues with keyboard access, missing headlines, hyperlinks, etc.
Public accommodations and commercial facilities have to follow these requirements. The commercial segment has priority attention.
Find the entire list of ADA guidelines on ada.gov.
#3 – Web Content Accessibility Guidelines (or WCAG)
It is an internationally accepted standard for web accessibility of apps and websites. You can find it on w3.org.
WCAG has four accessibility principles every web designer, analyst, tester, and developer needs to follow. They stipulate that information, user interfaces, and navigation must be perceivable, operable, understandable, and robust.
Check-list of Adjustments You Can Do Today to Improve Accessibility in UX
- Add description (ALT text) to every image on your site.
- Don’t use color as the only visual cue. There are multiple ways to make your information stand out: grouping, space, size, value, patterns, etc.
- Ensure that the colors you use have enough contrast to make the content readable.
- Check if it is easy to use keyboard navigation on your site.
- Use semantic HTML tags. Thus, users will be able to listen to a list of all the headings and jump to the one they need.
- Avoid putting placeholder text in your forms where people should input information. Use the <label> element instead.
- Add focus indicators for the selected link, form, field, widget, button, or menu item. Make the selected part look different from the other parts.
If you have any comments on accessibility standards or experiences you’d like to share, don’t hesitate to email us at serafima@flowmapp.com.