Visible focus: accessibility for designers

  • Author: Access iQ ®
  • Date: 4 Mar 2015
  • Access: Premium

Quick facts

Browsers have included focus indicators for many years and people are accustomed to seeing them when tabbing through a webpage and using forms.

  • Provide ways to help users navigate, find content, and determine where they are
  • Focus helps users with cognitive difficulties
  • Young people, seniors benefit
  • Helpful in low light, mobile devices or distracting environments

Browsers started it, don't break the browser

Browsers have included focus indicators for many years and people are accustomed to seeing them when tabbing through a webpage and using forms. All browsers display the indicator in slightly different ways, but the current consensus seems to be a soft, glowing blue line or a fine dotted black line. The purpose of focus in a web browser is to show an element on a webpage has focus, meaning that any other actions taken by the user will be on the item with focus. So a form field that has focus will receive the letters typed, a link with focus will be activated with the return key, etc.

Removing or adversely modifying the focus indicator removes the "you are here" function it supplies.

In addition to preserving focus, it is useful to extend it, by one or more of the following:

  • Increasing the visibility, contrast or style of focus e.g. strong background or text colour change.
  • Extending the hover state common to mouse movement to the focus state e.g. hover.
  • Normalising focus across different browsers.
  • Show focus in applications and controls and not just forms and links.

Premium Content

Premium content is available to users that have a current subscription to the content.

This topic is part of our premium content range. To access it, you need a 12-month premium subscription — but let's put that in perspective. How many hours will you waste if you try to find free information on the internet? And how can you be sure that free info is correct? Or comprehensive? Or specific to your role?

With a premium subscription, you get virtually everything you need, all in one place. All you need to do is follow the information provided, and you'll know you're covered.

Each subscription includes:

  • A year of content updates — Premium content is updated regularly, and you get all of those updates for free.
  • Professional support — Ask questions or request further information from an Access iQ™ specialist.
  • Access to Q&A — See the questions and answers submitted by other premium subscribers, so you remain up-to-date on the accessibility challenges faced by others in the industry.

Unlock this content: