Business 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").