Change Details

### Background Vector checkbox hack implementations use `visibility: hidden` to hide the elements when the checkbox is not checked. This removes these elements from the accessibility tree, rendering them inaccessible to screenreader users. Because the main menu and collapsed TOC have landmarks in the hidden content itself, this means the landmark disappears when the checkbox is not checked. This is mentioned with the main menu in T311294. This is generally fine for the user menu and most dropdowns, as they are generally entirely contained in a landmark, and hiding the menu contents matches the experience for visual users ### Developer notes The simplest solution is to use `.ui-helper-hidden-accessible`or 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

### 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. ### Developer notes The simplest solution is to use `.ui-helper-hidden-accessible`or 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

### 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. BecauseThis is problematic for the main menu and collapsed TOC have landmarks in the hidden content itself,, 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). tThis means the landmark disappears when the checkbox is not checked.is particularly an issue for the main menu which is closed by default for anon users, This is mentioned with the main menu in T311294while the TOC is collapsed by default. This is generally fine forA temporary solution could be to make the usermain menu and most dropdowns, as they are generally entirely contained in a landmarkcollapsed TOC menu contents always available to screenreaders, and hiding the menu contents matches the experience for visual userseven when they are closed. ### Developer notes The simplest solution is to use `.ui-helper-hidden-accessible`or 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