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
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.
More information in our blog post, Focus on Style.