This wiki has been archived and is now read-only.


From Automated WCAG Monitoring Community Group
Jump to: navigation, search

This test case belongs to 2.4.7 Focus Visible


Version 1.0: Completed


This test checks that all elements that receive focus are visible in the viewport.



  • Focus styles are only applied when the focus of browser viewport has the focus of the operating system. Scripts that give focus to elements do not update the style of that element unless the user is focused on this particular viewport in the OS.

Test properties

Property Possible values
Test name Focused element visible in viewport
Success Criterion 2.4.7 Focus Visible
Test mode automatic
Test environment Remote Controlled User Agent
Test subject single web page

Test procedure


Test mode: earl:automatic

Each element that matches one of the following CSS selectors

  • a[href]:not([tabindex=-1]),
  • button:not([tabindex=-1]),
  • select:not([tabindex=-1]),
  • textarea:not([tabindex=-1]),
  • input:not([tabindex=-1]):not([type=hidden]),
  • *[tabindex]:not([tabindex=-1])

Step 1

Test mode: earl:automatic

Give focus to the selected element.

Check that the offsetTop is equal or greater than 0 AND that the offset left minus the textIndent is equal or greater than 0

If yes, return:

Property Value
TestCase SC2-4-7-focus-in-viewport
Identifier SC2-4-7-focus-in-viewport-passed1
Outcome passed
Pointer position

If no, return:

Property Value
TestCase SC2-4-7-focus-in-viewport
Identifier SC2-4-7-focus-in-viewport-failed
Outcome failed
ErrorMessage The element should be inside the viewport when it receives focus
Pointer position