Focus indicator FAQs

Why are there outlines around different elements on my site?

The outlines that show up around elements when you interact with them are called “focus indicators.” A focus indicator is a visual marker that shows which interactive element (form, button, etc.) on a webpage is currently being focused on. The focus indicator helps users who navigate the web with a keyboard (as opposed to a mouse) see where they are tabbing on the screen. It also helps users who have attention or short memory limitations.

Focus indicators are required for a website to be considered accessible under the Web Content Accessibility Guidelines (WCAG), and they are applied by your web browser's user agent stylesheet.

Why would someone use a keyboard instead of a mouse?

There are multiple reasons someone would use a keyboard for navigation. Some types of keyboard-only users are:

People who use screen readers. Screen-reader users are not always completely blind. Many users have impaired vision or other cognitive disabilities and use screen readers to help them understand the content. Screen readers are typically controlled exclusively using the keyboard.

People with limited mobility. Some website visitors struggle with fine-motor control, which makes it difficult to use a mouse. They may use assistive technology devices, such as a mouth stick, to operate a standard keyboard.

Power users. A power user could be a web developer or other users who enter lots of information on a site, such as data entry workers. The ability to tab through fields saves time and reduces movement off the keyboard.

What parts of my site will have the focus indicator?

Several areas of your site will need to have a focus indicator. A good rule of thumb is that, if you can interact with the element with a mouse, it needs a focus indicator. Some common elements include:

• Links

• Buttons

• Form fields/controls (text fields, search fields, select boxes, radio buttons, etc.)

• Menu items

• Elements triggered by hover, such as additional text or tool tips

• Navigational elements, such as arrows or circles to advance a slideshow or scroll feature

What do focus indicators look like?

Focus indicators appear as outlines around elements on your page that keyboard users can navigate to. The most common browsers used by web visitors (Firefox, Chrome, Safari, and Internet Explorer) all have built-in focus indicators, but they can appear differently in each browser. See below for examples.

Firefox

• Link focus is a dotted outline the same color as the link.

• Buttons have a blue outline and a smaller dotted outline around the button label.

• Form fields have 1 px blue outlines 

Chrome

• Link focus, buttons, and form fields all use a light blue outline.

Internet Explorer

• Link focus is a simple dark gray dotted outline.

• Buttons have a dotted outline around the text.

• Form fields are slightly more black than the standard dark gray.