AccessiWeb 2.2 - Rule 10.7.1

Summary

This test consists in checking that each html element that can grab the focus does not override the outline css properties to make the browser visual indication invisible

Business description

Criterion : 10.7

Test : 10.7.1

Test description :

For each element that receives focus, the browser visual indication must not be removed (CSS property outline, outline-color, outline-width, outline-style). Does this rule have been followed?

Level : Bronze

Technical description

Scope : page

Decision level : semidecidable

Algorithm

Selection

Set1

All the html elements that can grab the focus and not of type input, button, iframe, textarea and select

Set2

All the html elements that can grab the focus and of type input, button, iframe, textarea and select

Process

Test1 :

For each occurence of the Set1, we check whether the value of the "outline-style" css property is different from "none" or "hidden".

For each element returning false in Test1, raise a MessageA

Test2 :

For each occurence of the Set1, we check whether the value of the "outline-color" css property is different from the background-color css property.

For each element returning false in Test2, raise a MessageA

Test3 :

For each occurence of the Set1, we check whether the value of the "outline-width" css property is different from 0.

For each element returning false in Test3, raise a MessageA

Test4 :

If Selection2 is not empty, raise a MessageB

MessageA : Invisible Outline on Focus
  • code : InvisibleOutlineOnFocus
  • status: Pre-Qualified
  • parameter : tag name, Snippet
  • present in source : yes
MessageB : Check Manually Outline For Form Element And Iframe
  • code : CheckManuallyOutlineForFormElementAndIframe
  • status: Pre-Qualified
  • present in source : no

Analysis

Not applicable

Set1 AND Set2 are empty (the page has no focusable element)

Passed

Test1 AND Test2 AND Test3 return true for all elements AND Set2 is empty (all the elements have a visible focus visual indication and no element that needs a human check is present on the page)

Pre-Qualified

In all other cases

Notes

The value of the css properties outline, outline-color, outline-width, outline-style are determined while fetching the page, through a javacript script. Each html element is analyzed to extract these info, as well as whether it is focusable and it is displayed ("display" css property equals to "none" or "visibility" css property equals to "hidden").

Some elements are de facto excluded from the selection:

  • input
  • button
  • textarea
  • iframe
  • select

Their look&feel is defined by the browser.