When you click or tab to an interactive element, your browser may show a black, blue or coloured border around it. This is the element’s focus outline. It helps people using a keyboard, switch device or other assistive technology see where they are on the page.

Do not remove a focus outline unless the element already provides clear visual feedback when selected or focused, such as a visible change to its colour, border, background or state. The feedback must also remain clear when navigating with the keyboard.

Where an element has its own clear selected state, use the following CSS:

/* change focus outline to none where the element gives other visual feedback when selected */
#e-contact-buttons__content-wrapper:focus {
  outline: none;
}

/* change focus colour to transparent to allow high contrast modes to restore colours for accessibility */
:focus {
	outline-color: transparent;
}

Using outline-color: transparent preserves the outline itself while avoiding an unwanted default colour in standard viewing modes. This gives forced-colour or high-contrast settings a better opportunity to provide a visible focus indicator for people who need one.

Before publishing, test the affected page using the Tab key only. Every link, button, form field and custom interactive element should have an obvious, usable focus state.

Further reading: The A11Y Project’s focus-outline guidance and the related CSS discussion.