Visible Focus for Keyboard Navigation

Site URL: https://www.westlakeconsultinggroup.com/

Hello! I am looing to create a custom focus indicator for my client's website to comply with Web Content Accessibility Guidelines.

Looking to create an orange or teal focus indicator for users using the tab button to navigate the site. Currently in Chrome there is only a slight dashed black or white outline that I'm hoping to improve upon for accessibly.

Any help would be much appreciated, thank you!

Hi @kyledavis726,

If you're on a 7.1 template, a focus indicator is already built-in. If you're running version 7.0, you can add the following CSS to your site within Design > Custom CSS:

:focus {
  outline: 3px solid #f08421 !important;
  outline-offset:2px !important;
}

With this expected result when navigating with the tab key:

If you're looking for further help complying with WCAG, consider checking out our free Squarespace accessibility audit tool at squareada.com/audit.

Hope this helps!
-Tyler