SJSchaidt Posted January 24, 2020 Share Posted January 24, 2020 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 NaomiSpeaks 1 Link to comment
tcp13 Posted February 4, 2020 Share Posted February 4, 2020 (edited) 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 Edited February 4, 2020 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
northamrealty Posted January 8, 2021 Share Posted January 8, 2021 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
tcp13 Posted January 9, 2021 Share Posted January 9, 2021 (edited) 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 Edited January 9, 2021 by tcp13 creedon 1 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
creedon Posted January 9, 2021 Share Posted January 9, 2021 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 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
northamrealty Posted January 11, 2021 Share Posted January 11, 2021 @tcp13 Thank you so much for responding! That did the trick! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment