Key Concepts

POUR Principles

3 min read
Share

The global standards for accessible digital design are defined by the Web Content Accessibility Guidelines (WCAG). These standards are created and maintained by the World Wide Web Consortium (W3C)—an international organization that defines and documents best practices and principles of web development. The WCAG standards are made up of specific requirements and guidance for how to design and develop accessible websites and applications.

The WC3 has organized the WCAG standards around four major principles—requiring digital solutions to be perceivable, operable, understandable, and robust. Together, these principles make up the POUR framework.

While these principals are the foundation of digital accessibility, and the WCAG guidelines, they are not a checklist. Rather, they are meant to create a system of how to think about and evaluate the functional effectiveness of your website.

POUR Pillars

1. Perceivable: Information must be presented in ways users can detect

To be perceivable, your website content all users should be able to consume its content—including those with vision and hearing loss. When evaluating the perceivibility of your website ,ask yourself if anyone would be unable to receive the information it provides.

Without making a conscious effort to ensure your website’s content is perceivable, you’re likely to unintentionally exclude visitors from consuming content or hide important context from them. Examples of where you can begin to improve the ability of any user to perceive your website include:

  • Images: Without alt-text, a user relying on a screen reader will be aware that an image is present, but they will be unaware as to what the image is of; missing any important context is provides. Make sure to add alt-text to images to ensure they are perceivable for everyone.
  • Videos: Users in noisy environments or those experiencing hearing loss often rely on captions to perceive what’s being said in a video. Now, many video editing tools have some form of caption auto-generation built in—so there’s no excuse not to enable them.
  • Low contrast: Make sure that your text and background color combinations have sufficient contrast. Following the WCAG guidelines for color contrast will ensure that users with vision impairments are able to read, or perceive, your website content. Low-contrast can affect negatively affect all users, regardless of an individual’s vision loss or color blindness.

2. Operable: All functions must be usable regardless of input method.

To be operable, your website should be able to be navigated by all users; be it standard computer mouse or an alternate method of navigation. At a minimum, all interactive elements—such as buttons, links, and inputs—should be able to be reached by pressing “tab” on a keyboard, display an obvious focus state, and perform the expected outcome when pressing “enter” on a keyboard. When evaluating the operability of your site ask yourself if anyone would be unable to navigate or interact with the page.

Across all devices, make sure interactive elements meet the minimum required target size of 24 by 24 pixels. This ensures that they can be accessed through both mouse and touch-screen interactions.

3. Understandable: Content and controls must be clear and predictable.

To be understandable, your website should use clear and descriptive language. When evaluating the understandability of your site ask yourself if anyone would be unable to determine what’s happening or what action to take next. A user should not have to see the visual aspects of a website in order to understand the information it provides. Some areas you may want to pay particular attention to include:

  • Make sure buttons and links are descriptive and clearly state the action or destination.
  • Make sure error messages clearly state what went wrong and what the user should do to correct it.
  • Avoid using too much jargon that users may not be familiar with.

4. Robust: Content must work across browsers, devices, and assistive technologies.

To be considered robust, your website should function regardless of where and how a user accesses it. Make sure your website is being tested across a variety of browsers, devices, and assistive technologies. When evaluating the robustness of your site ask yourself if everything works beyond one device or one way of browsing. Common issues that websites experience include:

  • Responsive layouts and functionality that break on mobile
  • Forms that cannot be read by a screen reader
  • Code that only works in a specific browser

Why understanding POUR matters for small businesses

As the foundation behind accessibility guidelines, understanding POUR will make it easier to identify gaps or limitations within your website, and identify solutions to fix them.

Try to avoid thinking about accessibility as a simple checklist of black and white requirements; it is a combination of functional requirements, best-practice guidelines, evaluation methods. Using the POUR framework can help you keep focus centered on real customers and their ability to use your site.