Make Brine Folder Navigation Keyboard Accessible

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 

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:

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

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

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:

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

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! 😀

@tcp13

Thank you so much for responding! That did the trick!