Jump to content

Visible Focus for Keyboard Navigation

Recommended Posts

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!

Edited by kyledavis726
Link to comment
  • 4 weeks later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.