Want to know if your website is actually accessible? Unplug your mouse.
Go to your company's homepage right now and try to submit your contact form using only three keys:
- ️ Tab (move forward)
- ️ Shift + Tab (move backward)
- ️ Enter / Spacebar (click)
Did you completely lose track of where you are on the page? You're likely missing "focus states."
A focus state is the visible outline around an active link or button. For users with motor impairments who rely on a keyboard, that outline is their cursor. Without it, they are navigating blind.
Yet, developers constantly disable it (outline: none;) to make the UI look "cleaner."
Under the AODA and strict WCAG 2.2 guidelines, visible focus states aren't just good design—they are legally mandatory.
Take the 2-minute challenge today. If you fail the unplugged mouse test, your code is likely out of compliance. The good news: properly implemented focus indicators are a straightforward fix that dramatically improves the experience for the estimated 2.5 million Canadians living with a disability that affects computer use.
Here's what a compliant focus state looks like in CSS:
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}Notice :focus-visible instead of :focus—this ensures the outline only appears during keyboard navigation, so mouse users don't see the ring, while keyboard users always do. It's the modern, standards-compliant approach.
Under WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance), the focus indicator must have a minimum area equal to the perimeter of the component multiplied by 2 CSS pixels. That's a real, measurable requirement—not a vague guideline.
When you remove focus states, you're not just annoying keyboard users. You're creating a legal liability under Ontario's Accessibility for Ontarians with Disabilities Act (AODA), which requires all public-facing websites to meet WCAG 2.1 Level AA as a minimum.
Take the 2-minute challenge today. If you fail the unplugged mouse test, let's get your code compliant at equalaudit.com.