Hannah96 Posted December 2, 2021 Share Posted December 2, 2021 Site URL: https://dandelion-antelope-pwty.squarespace.com I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover. I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection? Link to comment
Beyondspace Posted December 3, 2021 Share Posted December 3, 2021 12 hours ago, Hannah96 said: Site URL: https://dandelion-antelope-pwty.squarespace.com I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover. I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection? Your site is still private now. Kindly give it a protected password to check your issue together BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Caroline_Smith Posted February 10, 2022 Share Posted February 10, 2022 (edited) On 12/2/2021 at 2:55 PM, Hannah96 said: Site URL: https://dandelion-antelope-pwty.squarespace.com I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover. I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection? Hi there! Here is a snippet of CSS and JS that worked for me. Just copy & paste this into your website footer Code Injection via Settings > Advanced > Code Injection > Footer: If anyone reading this is in need of a Mega Menu that is completely ADA compliant and Web-Accessible, I have one available for purchase on my website! (this is not an affiliate link, but I am the creator of the plugin) <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style> .header-nav-item.header-nav-item--folder:hover .header-nav-folder-content { opacity: 0; pointer-events: none !important; } .header-nav-folder-content { opacity: 0; pointer-events: none; transition: all .2s; } .header-nav-folder-content.showDropdown { opacity: 1 !important; pointer-events: auto !important; } .header-nav-folder-content.showDropdown .header-nav-folder-item { pointer-events: auto; } </style> <script> $(document).ready(function() { $(".header-nav-item.header-nav-item--folder").on("click", function() { if ($(this).find(".header-nav-folder-content").hasClass("showDropdown")) { $(this).find(".header-nav-folder-content").removeClass("showDropdown"); } else { $(".header-nav-item.header-nav-item--folder .header-nav-folder-content").removeClass("showDropdown"); $(this).find(".header-nav-folder-content").addClass("showDropdown"); } }); $("body").click(function(e) { if ($(".header-nav-folder-content.showDropdown").length > 0 && e.target.closest(".header-nav-item--folder") == undefined && !Array.from(e.target.classList).includes("header-nav-folder-content") && e.target.closest(".header-nav-folder-content") == undefined) { $(this).find(".header-nav-folder-content").removeClass("showDropdown"); } }); }); </script> Edited February 15, 2022 by Caroline_Smith Jasperica 1 Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
ShaniJ Posted April 21, 2023 Share Posted April 21, 2023 @Caroline_Smith OMG thank you for this!! is there anyway to add a transition to this? Like https://chainsocial.com.au/ 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