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.