Remove the focus border without breaking accessibility

In this video I will show you how to remove focus border that appears on focusable elements, without breaking accessibility.

This border is used to highlight the focusable elements when navigating with the keyboard.

This focus border can break the design and many times we remove it, but if we remove it in the wrong way we will break the accessibility.

The first step is to remove focus border with 3 lines of css

This is very easy but we must take into account the css of Bricks Builder.

body.bricks-is-frontend :focus{
  outline: none;
}

.bricks-is-frontend class indicates that only the style is applied in the front end and does not take into account the editor and the backend.

Now we need to fix the accessibility

The focus-visible pseudo-class only shows the border when we navigate with the keyboard.

body.bricks-is-frontend :focus-visible{
  outline: solid 1px red;
  outline-offset: 5px;
  transition: all .3s;
}

In conclusion, navigating the delicate balance between design aesthetics and accessibility is crucial for creating a website that caters to all users. By carefully implementing CSS techniques and utilizing the focus-visible pseudo-class, you can remove focus border while ensuring seamless navigation for keyboard users. Embrace these strategies to elevate your website’s usability and inclusivity.