Hover, focus, active

 

What are they?

The words “hover”, “focus”, and (to a lesser extent) “active” are often discussed by WCAG and are very important for accessibility. So let’s learn what they mean (and a bit more!).

There are many interactive web elements: links, buttons, input fields, etc. To interact with any one of these elements, you can:

  • Hover: by putting your cursor over it. A hovered element is ready to be activated with a mouse or any mouse-emulating technology (such as eye and motion tracking).
  • Focus: a focused element is ready to be activated with a keyboard or any keyboard-emulating technology (such as switch devices).
    • With a keyboard or keyboard emulator, you can tab until you get to the element in question. “Tabbing” may involve simply pressing the Tab key, or a more complex key combination, depending on your browser and settings.
    • Some screen readers move focus to a focusable element when they read it. Focus then stays on that element until the reader encounters another focusable element.
    • In most browsers, after you activate a button, it stays focused.
  • Activate: an element is active when it’s currently being, well, activated.
    • With a mouse or mouse emulator, you can click while hovering over it.
    • With a keyboard or keyboard emulator:
      • For links: you can press the Enter key while the focus is on it.
      • For buttons, selection dropdowns, and many input elements: you can press the Space key while the focus is on it.

Design and development

Hover

Hover styles help us understand that we can interact with an element. This is particularly useful for people with learning impairments, cognitive disabilities, and limited computer literacy.

Focus

Focus styles are so essential for people using keyboards and keyboard emulators, that all browsers must provide default focus styles. The outline CSS property is used by convention because it does not affect the layout or move around nearby elements. Unfortunately, we cannot rely on the default styles alone, for the following reasons:

  • Some browser defaults are simply not sufficiently noticeable.
  • Most browser defaults are designed to stand out against light backgrounds, and they’re not noticeable enough on dark or saturated backgrounds.

Here are some tips for implementing supplementary focus styles:

  • Make sure you design focus styles that are noticeable enough, especially for people with limited vision. When a user is tabbing through, they can’t predict where the next focusable item will be, so the focus style needs to catch their eye.
  • Do not interfere with default focus styles: do not use outline: none to make them disappear, and do not use the outline property for your supplementary focus highlight or anything else. Many people who rely on visible focus to navigate have their own preferences, and use the outline property to override the browser defaults; if you’re also using the outline property, you may override the user’s preferences or lead to unintended results.
  • If you or the client doesn’t like the way the default browser focus styles look, you can use the :focus-visible polyfill. It is based on a new CSS pseudoclass that might be added in the next version of CSS, to supplement the hover, focus, and active pseudoclasses. When using :focus-visible, the browser only shows focus styles if it determines that they’re needed (for example, if the user is navigating using a keyboard).

Active

Active styles help users understand that they were able to successfully activate an element. However, since the activation time is usually quite short (the amount of time the mouse is clicked or the key is pressed), these styles should be noticeable but unobtrusive.

Resources