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 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile. 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 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile. 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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. 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