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

Make Brine Folder Navigation Keyboard Accessible


SJSchaidt

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 

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular 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 me

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

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

Posted Images

5 answers to this question

Recommended Posts

  • 1

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

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 1

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

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

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 post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...