Jump to content

Make Brine Folder Navigation Keyboard Accessible

Recommended Posts

I am working with the Brine Template and want to make the navigation elements within the Header-nav-folder accessible via keyboard. Today, I am able to tab through these links; however, because the menu only expands upon hover of the parent folder, a user is unable to see that they are navigating through a sub-menu. This causes a huge accessibility problem for keyboard-only users. I couldn't find anything in the CSS that triggers this onHover for me to add an onFocus event handler, so I'm a bit stuck as to how to make this appear without the use of a mouse. Any help is appreciated!

URL: www.lftphi.com 

Link to comment
  • 2 weeks later...

Hi @SJSchaidt,

You can use CSS to force the style (position, visibility, and opacity depending on the template) by using the :focus-within pseudo-class. This targets the folder and forces it to be visible whenever a child element is focused by the keyboard. For Brine I believe it'd be something like this:

.subnav:focus-within div {opacity:1!important;}

With an effect like this:

image.png.8f980812271290ec1a597117107eb1dc.png

Our team implements this kind of custom code all the time within our Squarespace accessibility service. We also add other keyboard accessibility features such as a skip link and re-enabled focus indicator, along with other ADA-compliant features such as custom alt text and high contrast mode.

Check out our website if you're interested in a free audit: squareada.com

-Tyler

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
  • 11 months later...

Hi @tcp13,

https://northamrealty.com/

I know this post is quite old but I was hoping you could help me. I am the new admin for my company's site (and not a developer by any means) and I'm having the same issue. We are using Brine 7.0 I managed to add a focus indicator to our website with the code

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

However, the menus do not drop down and the keyboard user is left tabbing without visibility.

Where do I insert the code you posted above to force visibility for sub menus?

 

Thanks

Link to comment

Hi @northamrealty,

It appears I posted the code for Brine with a screenshot of Bedford, so I'll assume that's an 11-month-old mistake on my part 🤦‍♂️

For your site, try adding the following within Design > Custom CSS:

.Header-nav-folder:focus-within {
  opacity:1!important;
  display:block!important;
  visibility:visible!important;
  left:0px!important;
}

With this expected result:

ezgif.com-gif-maker.gif.e5eeebf62fdc9c2d6f762faed118755d.gif

Hope this helps! If you're looking for a more substantial accessibility effort, checkout our free audit tool, which found 27 accessibility errors on your homepage 🙂

Feel free to send me a message if we can help with anything else.
-Tyler

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
14 minutes ago, tcp13 said:

It appears I posted the code for Brine with a screenshot of Bedford, so I'll assume that's an 11-month-old mistake on my part 🤦‍♂️

LOL! I hate that when I go back over an old post and find mistakes. It happens far more often than I'd like! 😀

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.