WCAG principles

Learn the POUR principles (Perceivable, Operable, Understandable, Robust).

The POUR principles

Web content must work for everyone, and four principles guide this. Their short name is POUR: Perceivable, Operable, Understandable and Robust.

Perceivable asks that content can be taken in through the senses; for example an image needs an alt text. Operable asks that every action works with the keyboard. Understandable means clear language and clear errors. Robust targets compatibility with assistive technologies.

WCAG conformance levels

WCAG grades each rule at three conformance levels: A, AA and AAA. A is the lowest bar; missing it causes serious barriers. AA is the middle level that most laws ask for; it covers things like contrast and keyboard support. AAA is the highest level.

The target is usually AA. AAA cannot always be met for every type of content; some rules only make sense in specific cases.

Exercise Write a perceivable image and a labelled form

Add a <figure> inside body. Put an <img> and a <figcaption> inside. The img should have src, a non-empty alt, numeric width and height. After the figure add a <form>; inside it put a <label> and an <input>. The label's for must match the input's id, and the input must be required.

Show example solution

<body>
  <figure>
    <img src="/images/forest.jpg" alt="Forest lit by morning sun"
         width="1200" height="800">
    <figcaption>Morning forest walk</figcaption>
  </figure>
  <form action="/search" method="get">
    <label for="search">Search</label>
    <input id="search" type="search" name="q" required>
  </form>
</body>

Test yourself

Which of the following is NOT one of the POUR principles?
- Perceivable
- Operable
- Colourful
- Robust
Show answer

Colourful — Correct. Colourful is not in POUR; the four principles are perceivable, operable, understandable and robust.

Which principle?

<p>An image having an <code>alt</code> text falls under WCAG's ____ principle.</p>

Show answer

<p>An image having an <code>alt</code> text falls under WCAG's Perceivable principle.</p>

Match each principle to an example

Perceivable

Alt text on images
Operable

All actions via keyboard
Understandable

Clear error messages
Robust

Screen reader support
Which WCAG level is most often required by law?
- A
- AA
- AAA
Show answer

AA — Correct. AA is the middle level that most laws require.

Next lesson: Keyboard navigation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies