Removing Focus Highlight from Buttons on Click While Maintaining Accessibility

Introduction

When developing web applications, it’s common to encounter UI elements like buttons that display a focus highlight when clicked. This visual cue is essential for accessibility, as it helps users who rely on keyboard navigation identify which element currently has focus. However, there are scenarios where the design requirements might lead you to prefer removing or altering this default behavior. In this tutorial, we will explore methods to remove focus highlights from buttons upon click, while still respecting best practices in web accessibility.

Understanding Focus and Accessibility

What is Focus?

Focus refers to which element on a webpage currently receives input from the keyboard or other input devices. When an element has focus, it may show visual cues such as outlines or shadows to indicate its state. This feature is crucial for accessibility, allowing users with disabilities to navigate through interactive elements efficiently.

Importance of Accessibility

Accessibility ensures that web content is usable by people of all abilities and disabilities. Removing focus indicators can create a barrier for those who rely on keyboard navigation. Therefore, any changes made to the default behavior should maintain or replace this visual guidance in an accessible manner.

Methods to Remove Focus Highlight

There are several approaches to modifying the focus style on buttons without compromising accessibility:

1. Using CSS :focus and :focus-visible

The :focus-visible pseudo-class is a modern solution for selectively removing focus styles based on user interaction methods (e.g., mouse vs. keyboard).

Implementation

Here’s how you can implement it:

/**
 * Remove focus styles for non-keyboard interactions.
 */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/**
 * Provide a custom style for explicit focus via keyboard navigation.
 */
:focus,
.focus-visible:focus:not(:focus-visible) {
  outline: 0.2rem solid #069; /* Customizable color and size */
}

This CSS snippet ensures that the focus highlight is removed when users click with a mouse or touch, but remains for those navigating via keyboard.

2. JavaScript-based Solutions

For broader compatibility, especially in environments where :focus-visible is not supported, you can use JavaScript to manage focus styles dynamically.

Example Using Event Listeners

document.addEventListener("mousemove", () => {
  document.body.classList.remove("focus-visible");
});

document.addEventListener("keydown", ({ key }) => {
  if (key === "Tab") {
    document.body.classList.add("focus-visible");
  }
});

This approach toggles a class on the body element based on user interaction, allowing CSS to apply styles conditionally:

body:not(.focus-visible) :focus {
  outline: none;
  box-shadow: none;
}

3. Using onmousedown Event with React

For those using frameworks like React, leveraging event handlers can provide fine control over focus behavior.

Example in React

In a React component, prevent the default behavior during the mouse down event:

<button onMouseDown={(e) => e.preventDefault()} className="btn btn-primary">
  Add Page
</button>

This prevents the focus from being applied on click but allows for keyboard navigation to maintain accessibility.

4. Alternative Elements

Another unconventional method involves using alternative HTML elements, such as a label styled as a button:

<label type="button" class="btn btn-primary">
  <span class="icon-plus"></span> Add Page
</label>

While this can visually remove focus indicators, it’s crucial to ensure that the semantics and accessibility of your application remain intact.

Best Practices

When altering focus styles:

• Maintain Accessibility: Always provide alternative ways for users to navigate using assistive technologies.
• Test Across Devices: Ensure your solution works across different browsers and input methods.
• Customize Focus Styles: When removing default styles, consider adding custom ones that are equally or more visible.

Conclusion

While it might be tempting to remove focus indicators purely for aesthetic reasons, maintaining accessibility is paramount. By using CSS pseudo-classes like :focus-visible, JavaScript event listeners, or React event handlers, you can achieve a design that meets both functional and visual requirements without sacrificing usability for all users. Always prioritize an inclusive web experience.