WCAG / Accessibility

[Juanjo]

Hi,

Im dealign with some accessibity issues after an accessibility audit to one of our websites.

I’ve noticed that modal menus can’t be navigated by tabbing since it doesn’t display submenu links although you can still navigate thorugh the invisible links.

There is a way to solve this?

Thank you!

[christian]

Hey @Juanjo,

The navigation inside the modal is accessible using the keyboard. Please show us how you’re navigating. Are you using the tab and the enter keys?

[Juanjo]

HI,

ChatGPT

The problem arises when browsing from the mobile device. Here, the tabulation jumps from one element to another, but when reaching the submenu, it continues to jump from one element to another without displaying them, since there are submenu items.

I think the appropriate behavior, to be accessible, would be for the menu to navigate through all the items in the initial menu, jump to the submenus by pressing Enter, and continue navigating among the items that appear.

[charlie]

We see what you mean now. The navigation layered element will cycle through all hidden links. It’s a problem that stems from hidden items not using display: none; and unfortunately not something we’ll probably get to till Pro 6.5. The following will CSS on the navigation layered will sorta fix this, but will lose animations on this element. We’ve taken note on the issue. Happy holidays!

$el .sub-menu:not(.x-current-layer, .x-prev-layer) {
  display: none;
}

$el {
  height: auto !important;
}

[Juanjo]

Thank you Charlie.

Happy holidays and New Year for you!!

[tristup]

Hi @Juanjo,

You are most welcome.