Background
Vector checkbox hack implementations use visibility: hidden or display: none to hide the elements when the checkbox is not checked. This removes these elements from the accessibility tree, rendering them inaccessible to screenreader users.
This is problematic for the main menu and collapsed TOC, as the menu trigger is located in a different location in the DOM from the menu content, rendering them inaccessible to screenreader users. This is exacerbated by the fact the landmarks in the main menu and collapsed TOC are in the menu content, and are hidden when the menu is closed (mentioned in T311294). This is particularly an issue for the main menu which is closed by default for anon users, while the TOC is collapsed by default.
A temporary solution could be to make the main menu and collapsed TOC menu contents always available to screenreaders, even when they are closed. This would allow the menu content to at least be discoverable by landmarks.
Developer notes
The simplest solution is to use .ui-helper-hidden-accessibleor equivalent CSS on the main menu and collapsed TOC to visually hide the contents. However this should be a temporary solution, as it would make the TOC and main menu always available to screenreaders even when the menu is closed.
We could also update the HTML/CSS to ensure that the nav element is not hidden when the menu is closed. However, this alone won't help the user experience much because the trigger is not located in the landmark. An ideal solution would ensure the menu trigger is inside the nav landmark, which could be possible for the main menu when we move it to a dropdown menu.
AC
- Main menu and "Site navigation" landmark is still accessible to screenreaders when the menu is closed
- TOC and "Contents navigation" landmark is still accessible to screenreaders when the menu is closed