UI/UX

Accessibility in UX design

I recently made a decision to change the career from 15 years of Early Intervention, serving children under three years with disabilities or other challenges. As I dive into UX design more and more, I understand that the core value of UX is empathy and so as for Early intervention.

Accessibility in UX is the design for everyone including individuals with special needs, disability, or challenges associated with old age. People with disabilities include temporary, permanent, also the type and severity like motor(physical), sensory (hearing and visual loss), cognitive (intellectual), and combination of all. Accessibility also includes challenges faced by people like colorblindness, or temporary disability like a 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 of 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 websites which has taken an extra step to consider those guidelines and followed the principles. While the examples are not all or an exhaustive list but few that helped me to understand and shape up my first 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 and makes it easy to scan the information and catches 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 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. The foreground and background colors should have a contrast 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. In spite of using universally recognized icons, some old-aged users or new users may find it difficult.

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 them do their task quickly.

ELF website design

Also keeping the information in the box rather than like, it 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 website

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