Accessibility 101: UX Design

May 10, 2020 | design, learning in public, UX

In a universe filled with possibilities, we want as many people to have as many experiences as they’d like to. As designers and web developers, we can work towards making all experiences accessible.

“We live in a universe filled with possibilities, it should be possible for everybody to experience them”

Usability & Accessibility

Usability & accessibility aren’t the same, even though they’re often mistaken for being the same. You can have usability without accessibility and vice-versa.

  • Content first: begin your design with content in mind. The user comes for information.
  • Impairments to keep in mind when designing to ensure your product is accessible to all:
    • vision
    • hearing
    • cognitive
    • limited mobility
    • seizure disorders 
    • → vision side note: colour deficiencies could mean the entire colour spectrum reduced to 2 buckets


  • what: level to which a product, device, service or environment is available to all
    • a.k.a how widely available, reachable, understandable and interactable your product is


  • what: how easy a product, device or software is to use and how quick it is to learn and recognise
    • “the ease of use and learnability of a product or software”

WCAG (web content accessibility guidelines):

  • internationally recognised guidelines for making the web accessible for everyone, including people with an impairment to their vision, hearing, mobility or cognition
  • WCAG recommendations allow designers to adhere to legislation and regulations around web accessibility
  • A system of ratings depending on level of conformance: A, AA, AAA

→ 4 Principles of Accessibility
from WCAG

  • think of the 4 principles as pillars to group legislation and regulations under: 
  • acronym: POUR

1) Perceivable

  • Content must be perceivable to at least one sense
  • Methods:
    • Screen-readers for the blind
    • Text zoom for visual impairment
    • Text representation (e.g. captions) for the deaf

2) Operable

  • All interface elements in the content must be operable. In other words, “the UI can’t require an interaction a user can’t perform.”
  • Must be operable and remember not everyone can use a mouse due mobility impairment
  • Interface elements in the content must be operable
  • Methods:
    • operable by keyboard
    • speech recognition software

3) Understandable

  • Content and controls must be understandable
  • There are different levels of cognitive abilities. Your content should be understandable by as many people as possible. Autism is one impairment
  • Methods:
    • clear text
    • consistent and predictable interface (UI)

4) Robust

  • Content must be robust enough to work with current & future technologies
  • Must be accessible through a variety of assistive technologies a.k.a must be technological compatible
  • Technologies examples:
    • Screen readers
    • Old browsers

Rule of thumb: if you can’t navigate through a website with a keyboard then it’s probably not accessible

  • motion, timers, animation & video e.g. dialogue window with count down timer (authentication on bank account): users with limited ability, dyslexia, short term memory, adhd and cognitive delays prevent them from reading and comphrending the content as fast as they needed to
    • innocent patterns with bad effects e.g. epilepsy with patterns and high contrast which lead to optical illusions to make the appearance of movement
    • What’s enough time? Instead of guessing: give control to the user through pause, stop or hide buttons when there are time based elements

Extra Notes on 4 Principles:

→ Understandable

  • content is the heart of accessibility because people consume content in a variety of ways
  • complex content is difficult to read for people and robots
  • rule of thumb: make your content meaningful for all your users i.e. presentable in their language
  • content should appear and operate in a predictable way (to avoid confusing users)
  • avoid and prevent errors:
    • forms of error prevention = dialogue box = immediate indiction of an error in the context of an error or form validation which allows user to find the error in context of the content

→ Robust

  • future friendly content
  • assistive technology: briel readers, screen magnification, voice-speech recognition such as dragon speaking or siri.
  • how does the content change as it moves across the changing forms of our various technological landscape devices
  • basic rule of thumbs:
    • write valid code
    • optimise navigation
    • using standard controls & content
    • stay away from known accessibility hazards

Meet Users Where They Are: How?

Distinguishable & Alternative Content

1) Distinguishable

  • what: content which is easy to hear and see, and where foreground and background can be distinguished from one another
  • methods & tools:
  • Use colour & contrast
    • Rule of thumb: UI design should start with an icon or text element to communicate an element rather than colour. Colour is the cream added on top.
  • Text zoom
    • what: a method used to scale text size up and down while viewing
    • successful text zoom = content is uniformly scaled without losing coherence, legibility or the original content displayed
    • unsuccessful text zoom = content is clipped, distorted or truncated even at 200% zoom

2) Alternative

  • what: forms of content which support all the senses
  • visual → audio → text
    • If the content is visual then provide audio or text, if the content is auditory then provide text and visuals, and so on.
  • methods & tools:
  • captioning: transcript of speech and sound effects (not to be confused with subtitling which is the translation of dialogue)

→ Operable

  • Flash sites are inherently inaccessible because they require mouse interaction but most assistive technology functions like a keyboard
  • Screen-readers need to be able to read navigation and links. When designing web products, keep in mind to not skip navigation descriptions or duplicate the name of links.
  • links: click here X | instead use, ‘click here to access something‘. Being as descriptive as possible as possible


Interesting side note: most clinicians don’t have the majority of impairments describes above so often when designing for them, designers ignore accessibility. However, <10% of clinicians in the US have a form of colour blindness. So, for example, if a designer is only leveraging colour to demonstrate patient status, there’s a great risk. Especially since many people don’t know they’re colour deficient till later in life

Interesting side note (2): deaf communities have more forms of alternative content and as a result have 10% higher employment rates in the US (*2016)


If you think about accessibility from the beginning and plan it into the design it can lead to beautiful designs e.g. Vancouver’s Robson Square:

Wheel Chair Ramp in Robson Square, Canada


Universal Design

  • equality of experience can be achieved through uni design
  • what is it: universal design is the design and composition of buildings products and services so that they can be accessed understood and used by everybody
  • it’s about the users and their environment, not just screen design
  • accessibility is designing for the you of the future
  • it means paying attention to all of the senses
  • questions to ask when designing:
    • how would a user consume your content if they couldn’t see it or if they couldn’t hear it
    • what extra things do you need to do for a user who isn’t able to touch in the interface if you have
    • or if they’re unable to use voice commands
    • compensate for each of the individual needs

Screen-reader User Interview [~28mins]

You feel really excluded if you can’t see the pictures. As machines get smarter, they can solve this problem. In IBM systems are trained to recognise objects in a picture and put them into a meaningful description

Parting thought: Accessible design & Creativity

Accessibility regulations put a box around what you can do which can lead to greater creativity



Note to self:

  • The language around disabilities kept catching my attention. There’s a great deal of ‘negative’ language e.g. deficincies. I’m interested to know what non-reductive language there is to use when describing accessibility. For example, is colour blindness a deficiency or merely an alternative form of experience? How else can it be described? I’ll research and follow up with more writing.