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!

Link to comment
  • 4 weeks later...
  • Replies 1
  • Views 985
  • Created
  • Last Reply

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:

264997876_ezgif.com-gif-maker(1).gif.fa4ae9b25229b58933a23ba0302e2c3e.gif

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

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.