1. Home
  2. :
  3. WCAG Guidelines
  4. :
  5. 2.4.7 Focus Visible – Level...

2.4.7 Focus Visible – Level AA

Warning!
Not all components are represented here yet.

Checklist – System Foundations

Iconography

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High
TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Page Framework

TestPriority
Is the cursor visible at all times?High

Checklist – Components

Accordions

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Alerts and Messaging

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Audio – Controls

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Breadcrumbs

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Buttons

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

<canvas> elements

Warning!
Before using <canvas> elements, read Using <canvas> accessibly.
TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Cards

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Charts and infographics

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Custom components

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Dialogs

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Drag-and-drop components

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Image maps

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Information bubbles

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Forms

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Global Header

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Local navigation

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Menus

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Tables 

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Tabsets

TestPriority
Is there a visible focus indicator on all actionable elements?High
Is the keyboard focus state (visual design) correct and clear?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Trees

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Video – Controls

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High

Checklist – Special Testing Scenarios

Keyboard Navigation

TestPriority
Is there a visible focus indicator on all actionable elements?High
Do all clickable components have a focus indicator with a contrast of at least 3:1 against their background?High
If creating custom components, is the keyboard focus state (visual design) correct and clear?High
When tabbing through the page can I always see where the focus is?High

Additional resources