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.

I actually don´t know how to approach this.

CodePudding user response：

You should look into the

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).

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.