ADA compliance on Hamburger menu

How might one add keyboard navigation to the Hamburger menu open and close button? I have been able to implement keyboard navigation everywhere else except on the mobile header navigation 'Menu' and 'Close' 

@tcp13 Any insight on how to implement this ADA related improvement on Mobile Halo Menu Open and Close button?

Hi @Kurt12345678,

Can you post or DM me a link to your site?

We've got some free code in the bonus section of this article for desktop dropdown navigation accessibility, but the fix for mobile depends on which template you're using.

Please post publicly if you can because I'd like to learn about this issue. Others may as well.

On 6/15/2021 at 1:18 PM, tcp13 said:

Can you post or DM me a link to your site?

Domain: https://www.hyperionchiropractic.com/ 

Live Theme: Version 7.0– Five family (Five template)

Looking to accomplish this: Success Criterion 3.2.1 On Focus - https://www.w3.org/TR/WCAG21/#on-focus

@Kurt12345678 Try adding the following within Settings > Advanced > Code Injection:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<!-- Accessible Mobile Navigation - Five Template -->
<script>
  // assign role=button so screen readers announce the label as a button 
  $("#mobile-navigation-label").attr("role", "button");
  
  // assign an aria-label as an invisible screen reader label so the button isn't empty
  $("#mobile-navigation-label").attr("aria-label", "toggle mobile navigation menu");
  
  // add tabindex value so button is focusable by keyboard navigation
  $("#mobile-navigation-label").attr("tabindex", "0");
  
  // add event listener so button can be triggered by pressing enter or space keys
  $("#mobile-navigation-label").keyup(function(event) {
    event.preventDefault();
    if (event.keyCode == 13 || event.keyCode == 32) {
      document.activeElement.click();
    }
  });
</script>

With this expected result using exclusively keyboard navigation:

This code is based on the standardized WAI-ARIA design pattern for a button: https://www.w3.org/TR/wai-aria-practices/#button

You cited WCAG Success Criterion 3.2.1, but I don't think that's applicable here (it prohibits a change of context, such as if focusing the button caused the menu to automatically open without pressing enter). More pertinent are 2.1.1 and 4.1.2 😎 Regardless though, good on ya for being proactive about accessibility!

Hope this helps!
-Tyler

17 hours ago, tcp13 said:

<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <!-- Accessible Mobile Navigation - Five Template --> <script> // assign role=button so screen readers announce the label as a button $("#mobile-navigation-label").attr("role", "button"); // assign an aria-label as an invisible screen reader label so the button isn't empty $("#mobile-navigation-label").attr("aria-label", "toggle mobile navigation menu"); // add tabindex value so button is focusable by keyboard navigation $("#mobile-navigation-label").attr("tabindex", "0"); // add event listener so button can be triggered by pressing enter or space keys $("#mobile-navigation-label").keyup(function(event) { event.preventDefault(); if (event.keyCode == 13 || event.keyCode == 32) { document.activeElement.click(); } }); </script>

Confirming the code worked as needed when added to the Footer block of Code Injection. Thanks @tcp13

44 minutes ago, studio5design said:

Can you please help me find the right selector for this?

Please see @paul2009's How to post a forum question.

6 minutes ago, creedon said:

Please see @paul2009's How to post a forum question.

How is that helpful? Is posing a question on a public thread illegal somehow? 

I found another solution that worked here, and included the current selectors for SQSP 7.0, using the Five family of templates: https://jolsonweddings.com/education/squarespace-buttons-accessible-name