Episode 3: Operable – all 34 rules

Welcome to WCAG made simple. This episode is about principle 2: Operable. Everything must be usable – by keyboard, mouse, touch, voice or assistive technology, and without time pressure. This principle has 34 rules. We will go through them in order.

Guideline 2 point 1: Keyboard Accessible. Everything also works without a mouse.

2 point 1 point 1, Keyboard. Level A. Everything can be operated with the keyboard alone. Many people do not use a mouse: because of paralysis, tremor, blindness – or simply because it is faster.

2 point 1 point 2, No Keyboard Trap. Level A. Keyboard focus never gets stuck. Anyone who can tab into an area can also leave it with the keyboard.

2 point 1 point 3, Keyboard (No Exception). Level triple A. Truly everything works by keyboard – without the exceptions in rule 2.1.1, such as freehand drawing.

2 point 1 point 4, Character Key Shortcuts. Level A. Shortcuts made of a single letter, digit or symbol can be turned off, changed, or are only active while the component has focus. Otherwise speech input or a slip triggers actions by accident.

Guideline 2 point 2: Enough Time. People get the time they need.

2 point 2 point 1, Timing Adjustable. Level A. Time limits can be turned off, adjusted or extended. Some people need much longer to read and type.

2 point 2 point 2, Pause, Stop, Hide. Level A. Anything that starts moving, blinking or scrolling on its own, lasts more than 5 seconds and is shown alongside other content can be paused, stopped or hidden. The same goes for content that updates itself automatically. Motion is highly distracting.

2 point 2 point 3, No Timing. Level triple A. There are no time limits at all. Exceptions are real-time events and media that simply play.

2 point 2 point 4, Interruptions. Level triple A. Interruptions such as pop-ups and notifications can be postponed or turned off. Only emergencies may interrupt.

2 point 2 point 5, Re-authenticating. Level triple A. If a session expires and people have to log in again, they lose no data and can continue where they left off.

2 point 2 point 6, Timeouts. Level triple A. People are told in advance how much inactivity leads to data loss – unless data is kept for more than 20 hours.

Guideline 2 point 3: Seizures and Physical Reactions. Nothing flashes or moves in a way that can make people ill.

2 point 3 point 1, Three Flashes or Below Threshold. Level A. Nothing flashes more than three times per second – or the flashing is small and dim enough to stay below the thresholds. Strong flashing can trigger epileptic seizures – this can be life-threatening.

2 point 3 point 2, Three Flashes. Level triple A. Nothing ever flashes more than three times per second – with no exception for small or dim areas.

2 point 3 point 3, Animation from Interactions. Level triple A. Motion effects triggered by scrolling or clicking can be turned off. Parallax and zoom effects can cause dizziness and nausea.

Guideline 2 point 4: Navigable. People can find their way and always know where they are.

2 point 4 point 1, Bypass Blocks. Level A. Repeated areas such as navigation can be skipped. Nobody should press Tab 30 times on every page to reach the content.

2 point 4 point 2, Page Titled. Level A. Every page has a title that describes its topic or purpose. It shows in the browser tab and is the first thing a screen reader announces.

2 point 4 point 3, Focus Order. Level A. With the Tab key, focus moves in a sensible order – usually top to bottom and left to right.

2 point 4 point 4, Link Purpose (In Context). Level A. The link text – together with its surrounding sentence or paragraph – makes clear where the link goes.

2 point 4 point 5, Multiple Ways. Level double A. There are at least two ways to find a page – for example navigation and search, or navigation and a sitemap. Pages that are a step in a process, such as checkout, are exempt.

2 point 4 point 6, Headings and Labels. Level double A. Headings and labels clearly say what something is about. Screen reader users jump from heading to heading to skim a page.

2 point 4 point 7, Focus Visible. Level double A. You can always see which element has keyboard focus. Without a visible focus, using a keyboard is like using a mouse without a pointer.

2 point 4 point 8, Location. Level triple A. People can tell where they are within the website.

2 point 4 point 9, Link Purpose (Link Only). Level triple A. The link text makes sense entirely on its own – without the surrounding text. Screen readers can show links as a plain list.

2 point 4 point 10, Section Headings. Level triple A. Longer content is organised into sections with headings.

2 point 4 point 11, Focus Not Obscured (Minimum). Level double A. The focused element is not completely hidden – for example by a sticky header, a cookie banner or a chat window.

2 point 4 point 12, Focus Not Obscured (Enhanced). Level triple A. The focused element is fully visible. No part of it is hidden.

2 point 4 point 13, Focus Appearance. Level triple A. The focus indicator is large and strong enough: at least the size of a 2 pixel border around the element, with 3:1 contrast between focused and unfocused states.

Guideline 2 point 5: Input Modalities. Using touch, pointers and motion is simple and forgiving.

2 point 5 point 1, Pointer Gestures. Level A. Functions that need multi-finger or swipe gestures also work with a simple tap or click.

2 point 5 point 2, Pointer Cancellation. Level A. An action fires on release, not on press. That way an accidental press can be cancelled by sliding away.

2 point 5 point 3, Label in Name. Level A. The visible text of a control is also part of its name in code. Otherwise voice control fails: “Click Send” does not find the button.

2 point 5 point 4, Motion Actuation. Level A. Functions triggered by shaking or tilting the device are also available as a button – and motion control can be turned off.

2 point 5 point 5, Target Size (Enhanced). Level triple A. Click and tap targets are at least 44 × 44 CSS pixels.

2 point 5 point 6, Concurrent Input Mechanisms. Level triple A. People can switch between input methods at any time: touch, mouse, keyboard, stylus, voice.

2 point 5 point 7, Dragging Movements. Level double A. Anything done by dragging can also be done with simple clicks. Dragging while holding is nearly impossible with a tremor or a mouth stick.

2 point 5 point 8, Target Size (Minimum). Level double A. Click and tap targets are at least 24 × 24 CSS pixels – or have enough spacing that you do not hit the neighbour by accident.

Those were all the rules for the principle Operable. On the website you will find an example and a practical tip for every rule. Thank you for listening.