2.4.7 - Focus visible

The purpose of this success criterion is to help a person know which element among multiple elements has the keyboard focus. If there is only one keyboard actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard actionable item.

When navigating a page via the keyboard, a sighted user must be provided a visual indicator of what interactive element currently has keyboard focus, and can thus be activated or manipulated via the keyboard. Interactive elements include links, form input fields and controls such as buttons. Without focus indicators, a page is generally entirely inaccessible to sighted keyboard users.

Basic focus indicators are provided by the web browsers and are typically shown as a border (called an outline) around the focused element. Default browser focus indicators are:

• Chrome – light blue outline
• FireFox and IE appear to vary by type of element
  • links have black dotted lines
  • buttons and form fields have light blue solid lines

For developers, make the indicators more visible as custom focus indicators can be applied via CSS. Ensure that:

• default browser focus is not removed through CSS by using techniques such as:
  • “display: none;”
  • “display: 0;”
  • :focus {outline: none}
• outlines of elements (i.e. buttons, images) are not visually similar to the custom focus indicators