Focus styles are critical in helping keyboard users navigate a website. Proper focus styles allow keyboard users to know where they are on a page as they tab through the content.

Highlighting content when in focus

  • For links, generally the same color and styles used to differentiate links on hover (a:hover), can be used for focus (a:focus).

  • For slides, highlighting the entire slide when scrolling back and forth, applying focus styles to the slide item.

  • :focus-within is a selector that applies styles to a parent when it's child has focus

    • This can be used for slides that contain links

    • Forms can be highlighted when one of their input fields is in focus

  • Styles that can be applied for focus:

    • styles applied to text: font-weight, contrast, font-size

    • styles applied to containers (forms, slides, etc): outline, border, animations, width, height, shadow

Visual Example

Animation displaying different focus styles on the DubBot website.

Default focus styles

All Modern browsers have default focus styles. Designers shouldn't rely on these default styles, since they can clash with the intended design of the pages. And in some instances the default focus styles may not be accessible.

For instance, if a default style is to create a light blue rectangle around a link, but the area where the link is has a light blue background, then the focus style wouldn't be noticeably visible, and thus inaccessible.

Did this answer your question?