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

Imagine visiting a water park on a holiday, excited to try out different rides and slides along with some fun games, only to find out that there is an age limit for certain attractions and that people with disabilities cannot enjoy all the rides. Not so fun, right?In this blog, I will be covering how to create and think of UX designs which are not restricted to only few people but accessible to use for all people, Let’s get started.

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 mattersAccessibility 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 navigationLet’s look at some Accessibility issues that can be addressed in the Design phase itself.In a fact sheet on visual impairment and blindness [WHO-VI] the World Health Organization (WHO) estimates that there are 246 million people worldwide who have low vision and 39 million people are blind, indicating that 86% of the people with visual impairments have low vision.

• Inclusive Colors for AccessibilityColors 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.