Making Accessibility accessible: The POUR Principles

Nozi Nindie
Designing Humans
Published in
5 min readOct 1, 2018

The concept of accessibility seems inaccessible to many because at face value, the barrier to entry is high. Checklists in themselves can be intimidating, and a checklist that is upwards of 80 plus items may feel like a set up for failure. Let’s attempt to unravel this ball of yarn so that over time, we can make something great with it.

An illustration by IrenHorrors of Alice, surrounded by chaos, and falling down a rabbit hole.

Accessibility is a broad topic that may often feel like going down a rabbit hole. One that’s similar to, but not quite like the kind that Alice fell through. With so many sources online from detailed code rules, to technical checklists you may be left wondering what to do next. The good news is that like anything that follows a system, there are principles to help guide you when you’re out there making decisions in the wild.. and in the world of accessibility, these are Perceivable, Operable, Understandable and Robust; otherwise known as the POUR principles.

Before we get into them, let’s do a little housekeeping and understand a few terms.

What is accessibility?

This is how I have started to understand accessibility in product design; To make something accessible is to make it usable. But that is usable by more people with varying abilities while accommodating different contexts and methods of use (because exclusion is kinda rude.) Designing accessibly, is to appreciate another’s reality as being different to yours because in their reality, they do no suffer the absence of let’s say sight, because they accept the reality that is presented to them the way it is presented to them. Then taking that appreciation, and designing with the intention of taking them on the same journey as their sighted counterparts. That is the pulse of accessibility.

What is WCAG?

The Web Content Accessibility Guidelines are what the name implies. These are universally accepted standards describing how to make products more accessible to people with disabilities, with the most recent update being WCAG 2.1. Created by the World Wide Web Consortium also known as W3C, the list of guidelines may seem massive, but considering context of application will quickly take you from overwhelmed to empowered.

What’s up with assistive technology

Assistive technology is can range from a piece of hardware to software that is used to maintain, increase or improve the life of someone with a disability. Some examples of assistive technology can be as simple as a walking stick, to as advanced as voice recognition software.

A, AA and AAA… all the A’s

This is the rating system used to indicate the level of compliance through conformity to the guidelines with A being the minimum level and AAA the maximum level of compliance.

Now let’s get into the principles.

P for Perceivable

“Information and user interface components must be presentable to users in ways they can perceive.”

That’s how W3C describes it. Without context of the guidelines supporting this principle, this description may seem vague because the word ‘perceive’ is used to define itself.

What you’re actually being asked to do, is to remove any barriers to accessing your website or app by providing alternative methods of access to compensate for missing or weaker senses e.g. video captions for a person who is deaf, or the ability to resize text for someone with low vision.

It also means to support the use of assistive technology, like screen readers for a person with blindness. Without these, your message is lost in translation.

Under this principle you will find guidelines relating but not limited to:

  • The handling of media content like video, audio and imagery
  • The handling of text alternatives through things like captioning and sign language
  • The approach to the sequencing of content and layout
  • The handling of color and contrast
  • The control of text size and audio controls
  • The handling content interactions i.e. hover and focus states

O for Operable

“User interface components and navigation must be operable.”

What you’re being asked to do is to ensure that your website or app along with anything that is interactive on it, can be controlled through a variety of tools for example, through keyboard only use. It also means that your website or app should be error tolerant, allowing enough time to complete and correct tasks and do so easily.

Under this principle, you will find guidelines relating, but not limited to:

  • Keyboard operability
  • Time allowance
  • Seizures and other involuntary physical reactions
  • Navigation through things like focus order, page titles, links, headings and labels
  • Input methods like touch targets sizing, alternative input methods

U for Understandable

“Information and the operation of user interface must be understandable.”

What you’re being asked to do, is to use language and functionality that is easy to comprehend. Nothing should be a surprise for the user because the action and result have a direct correlation and there is a level of consistency that aids understanding.

Under this principle, you will find guidelines relating, but not limited to:

  • Predictable and consistent navigation
  • Use of language such as abbreviations, jargon, reading levels
  • Predictable and consistent actionable components
  • Feedback and error handling
  • Help, such as contextual help and error prevention

R for Robust

“Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.”

This means that your website of app should work well across different platforms, technologies and devices within reasonable limits.

Under this principle, you will find guidelines relating, but not limited to:

  • Parsing and generally ‘clean’ code like no duplicate attributes, complete start and end tags for elements
  • Name, role and value
  • Status messages, sending messaging to the user without interrupting their workflow by giving focus to an element. e.g. “added to cart” while shopping online should act as a message and not a redirection of activity and focus for the user.

Accessibility doesn’t have to be daunting if you constantly remind yourself of two things. The first, is that it’s all about context. Think about your intent and overlay considerations of your user and the context of use; it should never just be about the checklist. The second is that the best way to eat an elephant, is one bite at a time.

The third, (I know I said two), but the third is that when you feel like giving up… remind yourself, in a pageant mom voice, that “you’re doing amazing sweetie.”

--

--

Nozi Nindie
Designing Humans

Always thinking and forever dreaming. Firm believer that in anything, it’s all about perspective.