Question 165083 in Wordpress Question posted in
The official Wordpress documentation can be found here.

“How can I prevent tabbing on a closed toggle hamburger menu in WordPress?”

I have a static web with HTML, CSS and JS.

As an accessibility request, I must avoid the tabulation to read what’s inside a closed toggle menu.

As well, once it’s open, I must avoid the tabulation to exit the list of the menu until you select one, or when you exit the menu with escape or the exit button.

enter image description here

I actually don´t know how to approach this.

Tags:

2

Answers


  1. 0

    You should look into the tabindex attribute. Set it to -1 whenever you close the hamburguer, set it to 0 whenever you open it. Not sure of the specifics, but a bit of trial and error should get you on your way.

    Login or Signup to reply.
  2. 0

    You not only need to avoid tabbing into the collapsed contents, but to avoid as well that it’s exposed at all to assistive technology.

    Screen reader users, for example, also navigate in a reading or browse mode, which does not use focus. Focus is mainly used for interaction, not for reading. So they can still read inside the closed menu.

    Hide an element from assistive technology

    In the developer tools of good browsers you can inspect the accessibility tree, or accessibility properties of elements. You’ll need to make sure that a collapsed element is not even in there.

    Accessibility tree in Firefox, focused on Graphic, “Insert Image Description Here”, in Paragraph > Link > Graphic.

    Several CSS properties that visually hide elements also hide them from assistive technology (AT). For example display: none, visibility: hidden, or height: 0.

    If for some reason you cannot use CSS that hides the element from AT, you can use aria-hidden="true". Sometimes this is necessary to animate the collapsing transition.

    Avoid focus within an element

    The CSS properties that hide an element from AT usually also hide it from the tab order. For example, you cannot focus on an element inside a parent that has display: none.

    If you apply weird CSS that does not have this effect, there are several possibilities:

    • Apply tabindex="-1" on all interactive elements inside the (not so well) hidden parent.
    • Use the relatively new inert attribute on the parent

    Avoid focus outside an element (focus trap)

    A focus trap can be established in a similar way, by applying inert or tabindex="-1" to all interactive elements outside the trap (the menu).

    Another alternative is to intercept the focusout event of the parent, to interrupt it and set focus somewhere inside the parent instead.

    You also should set aria-hidden on a top level element outside the dialog, to avoid mobile screen readers to exit the dialog (and to read outside).

    <div aria-hidden="true" inert>
  <header>…
  <main>…
</div>
<div role="dialog" aria-labelledby="idOfDialogTitle">
…

    You can search for focus trap to find solutions.

    Check the ARIA Authoring Practices Guide (APG)

    The Web Accessibility Initiative (WAI) put together quite some guides and a collection of accessible patterns to give good examples.

    The Disclosure Pattern applies to your case, a burger icon.

    The button that triggers the menu needs to have a role of button (if it’s not a real button you’ll need to add it), and use aria-expanded="true|false" to indicate whether the menu is open or not.

    Since your menu covers the entire screen and you should implement a focus trap, the dialog pattern also comes to mind.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search