Menu

Post image 1
Post image 2
Post image 3
Post image 4
Post image 5
Post image 6
1 / 6
0

Focus indicators that fail WCAG 1.4.11: real cases and exact fixes

DEV Community·a11ySolutions·20 days ago
#XEJz9tuR
#webdev#a11y#software#coding#border#focus
Reading 0:00
15s threshold

What is a focus indicator — and why does WCAG regulate it? When a user navigates a website using a keyboard, they need to know where they are on the page at all times. The focus indicator is the visual signal that answers that question: the outline, highlight, or state change that appears on the element currently receiving keyboard focus. WCAG Success Criterion 1.4.11 (Non-text Contrast) requires that the visual presentation of UI components, including focus and hover indicators, has a contrast ratio of at least 3:1 against adjacent colors. Without a sufficient focus indicator: Keyboard-only users lose their place on the page. Users with low vision cannot perceive the current focus state. The product fails a Level AA audit, the standard required by the EAA, ADA, and EN 301 549. Below are three real cases from accessibility audits, extracted from a structured issue bank. No simulated data. No approximations.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More