The navigation marker
Enabling/disabling navigation marker
To enable navigation marker on one HTML element, the alternative methods
include:
-
Don't explicitly set the CSS outline property of the HTML element.
-
If the outline property is set, it must have a value other than
none. For example, like this for the <a> element:
-
If the outline property is set and also has value none, the
CSS declaration of :focus pseudo-class must be added, and the
outline property must have a value other than none.
For example, like this for the <a> element:
The navigation marker is enabled by default. But it can be disabled by using
the outline property. For example, like this to hide the navigation
marker for the <a> element:
Note that this does not in any way affect the navigation algorithm.
Limitations
There are limitations regarding navigation marker:
-
The navigation marker might not be displayed correctly for all document
types. The following doctype declaration is therefore recommended:
-
Do not use links extending over more than one line. Highlighting these
links may not work correctly and may therefore cause problems for the browser
to draw the navigation marker. The user may not be able to determine which
link is focused.
-
Do not delete or hide an input element that has focus, as the navigation
marker is not removed when the element is hidden. If you absolutely must
hide or delete a focused input item, then you first have to remove the focus
from the element by either calling blur() or by manually moving focus to
another element.
-
For <a> element which has <img> subelement, the CSS
display property must has value block. Otherwise the focus
outline may not be able to cover the whole element rectangle.