Focus Visible

Focus Visible is a secondary element. It is recommended to include in your digital product.

┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈

A user navigating with a keyboard, screen reader, voice control, or switch can see where they are on a page by utilizing keyboard focus states. This will always let the user know where they are within the experience.

Summary Points:

  • Ensure contrast ratio is 3:1 if color is used

  • In HTML, use the tabindex attribute to specify the order of focus

  • In CSS, the focus class can be used to style elements

  • In CSS, the focus-visible class is an element when using the keyboard or other non-mouse device

Examples: