The Ultimate Guide To Building Accessible UX Designs: Everything You Need to Know

What is Web Accessibility ?

As we have seen the example of theme park how it should be accessible to all, let’s understand what Accessibility means in terms of Web.

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.

Why Accessibility is Important?

When designs, websites and applications are properly designed and coded, people with certain disability can use them.Many websites or applications are not designed according to accessibility standards set by WCAG, which makes users difficult to use.
Creating Accessible designs ensures that the end users can smoothly use the application,This benefits not only people with permanent disabilities but also those with temporary conditions. Here are some examples:
• People with temporary disabilities, such as a hand fracture or partial visual impairment, this can even include people with specs.
• Users who rely on speech-to-text/output technologies, like Alexa.

Inclusive Design and why it matters

Accessibility is not a one-person effort. It relies on the collaboration and input from users, product designers, product managers, and developers.
As Design (UX) phase is the first step to create any large scale application, If we address some aspects of Accessibility in the Design part itself, it will help reduce the workload on the developer,

In some regions this is also referred to as universal design and design for all.

Inclusive design addresses a broad range of issues including:
• Accessibility for people with disabilities.
• Access to Internet connectivity.
• Language
• Culture
• Keyboard navigation

Let’s look at some Accessibility issues that can be addressed in the Design phase itself.

Inclusive Colors for Accessibility

Colors are one of the most critical aspects of any Application or Design, We tend to experiment with different color contrast not knowing if the color combination is Accessible or not. Why does this matter?
There are majority of people with minor disabilities like color blindness, and even those using dark or light modes on their screens can be affected, As a designer it is essential to create accessible color combinations, to ensure everyone can interact with our designs.
Let’s look at an example of Accessible color combination, I am using white i.e in Hex value (#fff) as background and black (#000) as the foreground color.

In the above image, the contrast ration is 21: 1, which means that this color combination is Accessible i.e falls under AAA (highest level of accessibility). Let’s look at how the the ration is calculated.
When designing for different vision capabilities, the WCAG guidelines recommend the following contrast ratios, These are categorized into three levels: A, AA, and AAA.

Level A:
• The minimum contrast ratio for normal text is 3:1.
• This is lowest level of Accessibility.

Level AA:
• The contrast ratio for normal text (below 18pt) must be at least 4.5:1.
• For larger text (18pt and above, or bold 14pt and above), the required contrast ratio is 3:1.
• AA is the most commonly required level and ensures that text is readable by a broader range of users.

Level AAA:
• The contrast ratio for normal text must be at least 7:1.
• For larger text, the required contrast ratio is 4.5:1.
• AAA is the highest level of accessibility, Which provides best readability for users with significant visual impairment.

Animations: Less is better

When I started my career as a UI developer, I found animations really cool I used it whenever possible in my applications, After all who don’t like seeing things floating and moving here and there, glimmer, fancy looking transitions? But Animations are not always pleasant experience to all which fails the purpose of Accessible Design.Let’s look at how excessive animations can have negative effect on:

• People with Vestibular Disorder, like BPPV (Benign Paroxysmal Positional Vertigo), can encounter vertigo, dizziness due to excessive animations on the page.

• In the worst case, people suffering from Photosensitive seizures can be triggered by flashing or flickering lights. These seizures can also be triggered by certain patterns such as stripes.

So should we keep animations or remove them? If we remove them completely then the user experience might get affected, If we want to keep some motion let’s see how to add UI motion into your application without introducing accessibility barriers.

The WCAG includes three criteria for motion in UI.

1. Pause, Stop, Hide (Level A)

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;

2. Animation from Interactions (Level AAA)

This success criteria states that, user should not solely rely on animations for understanding the UI, there must be some way to stop the animation or the content should be understandable enough without using any kind of animations.

Making Images Accessible

Well,Images can be seen as well as heard as well thanks to audio description and ALT text, now users with visual disability can hear the images as well.

When using the img element, specify a short text alternative with the alt attribute. Note. The value of this attribute is referred to as "alt text".

How is this related to UX Design?
As a UX Designer you put a lot of thought in choosing images, considering the content the image should convey, and the message and purpose of the image.
With that understanding you can provide an appropriate and descriptive alt text to the image enhancing accessibility.

Few tips on writing good ALT text :
• Don’t write “image of” or “pic of.”
• Spell your alt text correctly, as the screen reader might read it incorrect.
• If the image is being used for decorative purpose use an empty alternative text instead.
• If you are using images or icons as a link to something, specify where does the link points to, for example is you use Twitter, Github icons to link.

Typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed

According to WCAG, There is no such thing as best typeface or font.

As WCAG, don’t specific any fonts that are considered to be accessible, the responsibility of choosing the right fonts depends upon the UX designer. The typography followed should be readable and clear to all the users.
Listing out some typography success criterion that are specified by WCAG, Web Content Accessibility Guidelines.

1. Text Spacing
   According to WCAG Success Criterion 1.4.12 Text Spacing
   • Line height (line spacing) to at least 1.5 times the font size;
   • Spacing following paragraphs to at least 2 times the font size;
   • Letter spacing (tracking) to at least 0.12 times the font size;
   • Word spacing to at least 0.16 times the font size.

2. Text Contrast
   According to SC 1.4.3 Text contrast
   • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
   • Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
   • Text that is part of a logo or brand name has no contrast requirement.
   
   

Resources and Tools for Accessibility

1. WCAG , The guidelines set for accessibility.

2. Color Contrast Checker, To check the levels of acceptance for a particular color combination.

3. Screen Reader , Screen reader to convert text to speech, screen viewer, Braille viewer.

4. UI Animations and accessibility, this blog covers the aspects of animations and accessibility.

5. Deque, Leaders in accessibility tools and standards.

6. Axe Devtool, Tool to detect accessibility issues.
   
   
   

   

   About Me
   I love tech talks and have a keen interest in exploring accessibility, I have also given a Tech talk recently on Building Accessible Components With React (Post).
   If you want to explore more such topics and blogs, Follow Me:

   • X / Twitter: https://x.com/Abhaypa24615837

   • LinkedIn: https://www.linkedin.com/in/abhay-patil-170794179/