SC2-4-7-focus-in-viewport

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

This test case belongs to 2.4.7 Focus Visible

Status

Version 1.0: Completed

Description

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

Background

Assumptions

  • 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

Selector

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
Info


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
Info