• Quick Start
  • Booting
  • Platform
  • Portals
  • References
    • API Reference TOI3
    • IIP Reference
  • Resources
ARRIS Enterprises, Inc. Confidential Information

The navigation marker

Enabling/disabling navigation marker

To enable navigation marker on one HTML element, the alternative methods include:

  1. Don't explicitly set the CSS outline property of the HTML element.
  2. If the outline property is set, it must have a value other than none. For example, like this for the <a> element:
    
    a {
      outline: auto;
    }
    
  3. 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:
    
    a {
      outline: none;
    }
    
    a:focus {
      outline: auto;
    }
    

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:


a:focus {
  outline: none;
}

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:
    
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
    
  • 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.

5.1.p5

Copyright (c) 2017 ARRIS Enterprises, LLC. All Rights Reserved. ARRIS Enterprises, LLC. Confidential Information.