Accessibility in UX design

neeti singhal
Moblize.IT LLC
Published in
4 min readMay 14, 2020

I recently decided to change my 15-year-old career from Early Intervention (serving children under three years with disabilities or other challenges) to UX. As I dive into UX design more and more, I understand that the core value of UX and Early intervention is the same, Empathy.

Empathy for all.

Accessibility in UX is the design for everyone including individuals with special needs, disability, or challenges associated with old age. The individual with disabilities may have a temporary or permanent disability, or one kind of disability like motor(physical), sensory (hearing and visual loss), cognitive (intellectual), or a different combination of all. A disability may also includes challenges faced by people with colorblindness, old age, or even fracture or multiple injuries.

WCAG (Web content accessibility guidelines) aims to provide guidelines to make sure the web content is accessible to all the users despite their challenges. The four principles that focus on the accessibility for all are:

  • Perceivable
  • Operable
  • Understandable
  • Robust

There are few examples I found on a few different websites which have taken an extra step to consider those guidelines and followed the accessibility principles. While the examples are not all nor this is an exhaustive list but a few that helped me to understand and shape up my prototype for my Career Foundry course work.

Readability/ Typography/Font

There are industry guidelines that make the design seamless by adding typographic hierarchy. The different weight of the font defines the importance of content and makes it easy to scan the information by catching the attention of the audience. The bolder and bigger font is clear and it helps people with low vision or old age read better. On the mobile phone keeping the character limit lesser than 80 and paragraph spacing is at least 1.5 times more than line spacing helps the reader to see and read clearly.

Larger font

If the font size is the constraint, the ability to zoom the text or providing the content in landscape orientation would be helpful for users.

Distinguishable/ Contrast

The contrast between the background which may include colors of the app, buttons, and even texts should always be considered. The foreground and background colors should have a contrast of a minimum of 4.5:1. Check out this Contrast checker resource here https://webaim.org/resources/contrastchecker/

Contrast checker

Heading and Label

Heading and labels give users an understanding of the action associated with the icons/ button. Despite using universally recognized icons, some old-aged users or new users may find it difficult so labels always help to make quick decisions.

Labels with icons

Form Place holder

It is recommended to label the form instructions on the top whenever possible. Sometimes, during filing long-form users forget, so the instructions outside the place holder them do their task effortlessly.

ELF website design

Also keeping the information in the box rather than an open line gives the user idea where they are supposed to fill and if there is wrong information, the highlighted box gives the feedback to correct.

ELF Pop screen

Another website that I found impressive with its accessibility modification is https://neilpatel.com/ content. The content can be modified in size, style, and link. This is very thoughtful design and no wonder it is one of the successful designs in digital marketing.

https://neilpatel.com/

Above are a few things, I have worked on my prototype. Accessible designs are seamless and now I remember the most often phrase, I heard in UX language is “Don’t make me think?” is so apt. A design is complete when it is accessible to all users.

--

--