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
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.
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
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.
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 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.
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.
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.
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.
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.
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.
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.