Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
SJSchaidt

Make Brine Folder Navigation Keyboard Accessible

Question

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 

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

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

Is your Squarespace website ADA compliant? Find out with our free accessibility audit.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...