Accessibility considerations to create UI design
In this article, I would like to share the basic accessibility knowledge based on Web Content Accessibility Guidelines (WCAG) when you create UI design.
What is Accessibility?
Accessibility refers to designing products, services, and environments in a way that makes them usable and understandable for as many people as possible, including those with disabilities or temporary limitations.
The Web Content Accessibility Guidelines (WCAG) 2.1/2.2 is one of the most common guidelines for web accessibility that all designers may know about this name.
In recent years, this concept of accessibility has always been something we need to keep in mind when creating designs.
For instance, in Canada or some countries, adherence to web accessibility standards is essential for government websites and is often encouraged or mandated by other organizations to ensure that digital services and information are accessible to everyone, regardless of their abilities or disabilities.
Examples of lawsuits involving accessibility failures in top companies
Let’s take a look at some of the articles by ACCESSIBILITY.com that cover several problems.
Walmart
In 2021, Tyrone Thompson sued Walmart, alleging that Walmart’s website was not accessible per WCAG standards. Among his complaints were HTML issues, improper link labeling, improper keyboard navigation setup, and more. He asked for penalties pursuant to what was required in the ADA and California’s Unruh Act, including Walmart’s correction of these errors and an award of $4000 per error.
Amazon
In 2018, a lawsuit was filed alleging that Amazon’s website was inaccessible to people with vision disabilities. Per the lawsuit, Amazon “violates the Web Content Accessibility Guidelines in not providing a text equivalent for every non-text element on its site that a screen reader can read as text to the user.” In other words, they don’t have alt-text.
Now that we have reaffirmed how important accessibility is, let’s move on to the specific perspectives we will look at.
Overview of the WCAG levels
Even though we generally follow accessibility and WCAG, there are different levels of that.
Here are details of each level:
- Level A (Priority 1)
Minimum compliance you can have. This level addresses the most basic accessibility features. - Level AA (Priority 2)
The minimum to be acceptable by law in some countries includes Canada (Toronto is more serious than others) and the US. - Level AAA (Priority 3)
This is the highest level of accessibility. While achieving AAA might be challenging for some types of content, it represents a commitment to an extremely high level of accessibility.
What do you need to consider?
The content of accessibility is enormous, so this time let’s pick up some basic accessibility concepts when creating a design.
Color Contrast
You need to ensure there is sufficient contrast between text and background colors to make content readable for users with visual impairments or color blindness.
Here are the resources:
This Figma plugin helps evaluate and ensure proper color contrast within your designs. It would be good to adjust the color contrast so that can pass at least AA.
Target Size
The concept of “target size” in accessibility refers to the size of interactive elements, such as buttons, links, and form controls, on a digital interface. It is an important consideration because larger target sizes make it easier for users, especially those with motor impairments or mobility limitations, to accurately select and interact with these elements.
Especially, in WCAG 2.2 released in October 2023, there was an update on more deep about target sizes that were not mentioned in WCAG 2.1.
Previously, it was the only AAA that the minimum target size for interactive elements should be 44 by 44 CSS pixels, but they mentioned AA that is “at least 24 by 24 CSS pixels” in WCAG 2.2.
Here are the resources:
Text Size and Spacing
You need to ensure sufficient contrast, avoid excessively small sizes, and use scalable fonts. It’s a good practice in design, using 16px for the body text is generally recommended, and 12px for small details such as photo credit is recommended as minimum text size (depending on the audience). Smaller sizes may be illegible on some platforms.
Line height provides different levels of readability. When the line height is at least 1.5 times and the space between paragraphs at least 2 times the font size, the text has good readability.
Here is the resource:
Visual Hierarchy
Considering visual hierarchy based on WCAG involves using appropriate formatting for text elements, such as headings and subtitles, to establish clear distinctions in importance and structure, ensuring readability and accessibility for all users.
Here is the resource:
- Success Criterion 2.4.6 Headings and Labels (Level AA) by WCAG 2.1
- Success Criterion 2.4.10 Section Headings (Level AAA) by WCAG 2.1
Meaningful Sequence for the content
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Consider it when you’re planning the layout of the pages and its elements such as titles, paragraphs, boxes, links, and buttons.
Here is the resource:
Free style guide template
To thank you for reading so far, we give you a free template for your project :)
There are basic style guide and a brief guideline for the color contrast and target size introduced in this article. I appreciate it if you clicked “Like” after duplicating the file on Figma. Check the template from here 👇
Conclusion
The topic of web content accessibility is quite huge, but it’s crucial to begin by understanding the underlying perspective during the UI process and actively strive to enhance accessibility.
I would be very happy if you clapped for this article and started following me ;)
