2.4.7 Focus Visible – Level AA

Checklist – System Foundations

Iconography

Test	Priority
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

Typography – Links

Test	Priority
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

Test	Priority
Is the cursor visible at all times?	High

Checklist – Components

Accordions

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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 

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

Test	Priority
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

• Accessible Focus Indicators: Something to :focus on by Aaron Perlman at Deque
• A guide to designing accessible WCAG-complaint focus indicators by Sara Soueidan