Operable

This lesson explains Operable in web accessibility with clear examples, practical use cases, and implementation best practices.

WCAG Operable Principle Overview

Operable is the second principle of the Web Content Accessibility Guidelines (WCAG). It requires that all interface components, controls, and navigation must be usable by everyone, regardless of the input device they use, including keyboards, touch screens, voice commands, switches, and assistive technologies.

An operable website allows users to navigate pages, activate controls, complete forms, and interact with dynamic content without unnecessary barriers. Features such as keyboard accessibility, visible focus indicators, skip links, sufficient time limits, and predictable navigation help satisfy this WCAG principle.

Requirement	Purpose
Keyboard Accessibility	Support users who cannot use a mouse.
Visible Focus	Show the currently focused element.
Skip Links	Allow users to bypass repeated content.
Logical Navigation	Provide a predictable user experience.
Sufficient Time	Give users enough time to complete tasks.
Accessible Controls	Ensure all interactive elements are usable.

Operable Content Example

<a
  href="#main-content"
  class="skip-link">
  Skip to Main Content
</a>

<button>
  Submit Form
</button>

This example includes a skip link for keyboard users and a native button that supports keyboard interaction, focus management, and assistive technologies without additional code.

Ways to Make Content Operable

The Operable principle focuses on ensuring users can successfully interact with every part of a website using different input methods and assistive technologies.

Technique	Purpose	Example
Keyboard Navigation	Operate all controls without a mouse.	Tab through menus.
Visible Focus	Identify the active element.	Focus outline.
Skip Links	Jump directly to main content.	Skip Navigation.
Logical Focus Order	Move through controls predictably.	Forms and menus.
Accessible Buttons	Provide keyboard-friendly controls.	Submit button.
Accessible Menus	Support keyboard interaction.	Dropdown navigation.

Operable Content Best Practices

Best Practice	Description
Support Keyboard Navigation	Ensure every feature works without a mouse.
Display Focus Indicators	Keep keyboard focus visible at all times.
Use Semantic HTML	Prefer native interactive elements.
Provide Skip Links	Help users bypass repetitive navigation.
Create Predictable Navigation	Keep layouts and controls consistent.
Avoid Keyboard Traps	Allow users to move freely between interface elements.

Common Operable Accessibility Mistakes

Creating controls that require a mouse.
Removing visible keyboard focus indicators.
Using custom components without keyboard support.
Creating keyboard traps inside dialogs or menus.
Using an illogical tab order.
Not providing skip navigation links.
Setting short time limits without extensions.
Ignoring keyboard testing during development.

Key Takeaways

Operable is the second WCAG accessibility principle.
Every interactive element should support keyboard navigation.
Visible focus indicators help users track their location.
Skip links and logical navigation improve usability.
Use semantic HTML for buttons, links, forms, and menus.
Operable interfaces improve accessibility, usability, and WCAG compliance.

Pro Tip

The simplest way to verify the Operable principle is to disconnect your mouse and navigate your entire website using only the keyboard. If every link, button, form, menu, dialog, and interactive component works correctly, you're following one of the most important WCAG principles.