POUR Explained: A Beginner's Guide to Accessibility

So what is POUR and why should I care?

POUR is an acronym in reference to the WebAIM WCAG checklist's different guideline sections. Each of these sections' guidelines, in turn, have their own success criteria. Designing and developing around the POUR guidelines allows the web to provide empowerment and freedom to all of its users and that is really one of the core reasons you should care. Outside of helping your fellow web surfers, being web-accessible at a level of 'AA' prevents run-ins with the law, because guess what? There are a lot of laws that are involved in accessibility.

So I know what your thinking.

That was a lot for an intro paragraph...

Well, let's start from the beginning, what do all those letters mean!?

P is for Perceivable

The name of this game is 'sense' accessibility. Simply put, we are catering to sight, hearing, and/or touch (taste & smell...the future 🤷‍♀️). There are four guidelines behind this concept.

1.1 Text Alternatives

• labels, aria-labels, alt attributes, adjacent text, etc

1.2 Time Based Alternatives

• transcripts, closed/open captions, audio descriptions, etc.

1.3 Adaptation

• screen sizes are variable, keyboard-only users, screen reader users, etc

1.4 Distinguishable

• contrast between foreground and background, don’t rely only on color to convey information, etc

O is for Operable

This means the user needs the ability to successfully use the forms, controls, and navigation available on the site. This seems fairly simple, but can sometimes be overlooked in the development and design process. Having visual indicators, proper labeling, and using proper HTML5 semantics can greatly help with a site being operable. Also allowing your users enough time to operate or navigate through your site. There are five guidelines behind this concept.

2.1 Keyboard Accessible

• A user needs to be able to access all points on a site using a keyboard.

2.2 Enough Time

• Don’t limit your user’s time on actionable items, but if you do make sure it’s a substantial amount of time with a warning.

2.3 Seizures and Physical Reactions

• be cognizant of strobing content, make sure to present warnings if there is in strobing or quick shifts in contrast.

2.4 Navigable

• Present your users with ways to navigate your site, find content and determine where they are.

2.5 Input Modalities

• Provide a smoother experience for users to operate functionality through different inputs outside of a keyboard.

U is for Understandable

For a web site to be understandable there must be consistency in the visual order as well as the DOM order (how the HTML is written), because this is the order it would be read in. Also the behavior of your site must be predictable. There should be a sufficient amount of hand-holding involved when it comes to action explanation. There are three guidelines behind this concept.

3.1 Readable

• Text should be readable and understandable via both content and order.

3.2 Predictable

• Page need to appear and operate in a predictable way, The order should follow DOM order, etc.

3.3 Input Assistance

• Provide your users with ways to avoid and/or correct mistakes.

R is for Robust

Content should be able to be interpreted by a variety of users, including those using assistive technologies ( i.e. screen readers, text to braille keyboards, color manipulation tools, etc). There is one guideline behind this concept.

4.1 Compatible

• Your site should work with a variety of browsers, assistive technology, and should accommodate to an extent for deprecated and new technologies.

Essentially, learning POUR concepts is something that is good for everyone, because disabilities come in all shapes and sizes as well as time frames ranging from permanent to temporary. Web Accessibility is something that we should all be striving for throughout the development and design process, it gives users a sense of empowerment and freedom, where they may not have it otherwise. The web is a way for anyone to explore the world and I think we should strive to make the world accessible.

Thank you so much for sticking around!

Be on the lookout for the next in this series ‘P in POUR is for Perceivable: A Beginner’s Guide to Accessibility’.

Where we get in the weeds on how you can make your site more perceivable with the WCAG Guidelines help.