I’m having some accessibility testing done on a development store and an issue has been found on the mobile navigation menu: there are elements that should remain hidden from all users, but have only been visually hidden, and remain exposed to assistive technologies.
This can be found when the mobile menu is expanded, on mobile devices only, with visually hidden elements placed behind the menu. The attached image shows the mobile menu in an expanded state, with the screen reader focus on the visually hidden banner heading text.
I have been told that the remediation for this would be to add “display: none” to parent element to hide from both keyboard and screen readers. Doing so will remove the elements from the focus order. Adding only aria-hidden=“true” will only hide the elements from assistive technologies such as screen readers, but not from keyboard only users. Is this something I can do myself using the theme (I am using Dawn)?
Yeah, for sure. If you want to share the “preview link” I can add a code snippet here that you just need to copy-and-paste in to hide them.
@Liam-Shopify would that be PII or should it be fine?
Hi Rob. Many thanks for your response. The project is commercially sensitive, so was hoping to get a solution without sharing a preview. Would this be possible? Thanks, Dan
Well, unfortunately I cannot see what to use to write the solution but I’ll use placeholders and try to explain best I can.
If you know of the actual selectors, use them, if not, if using Google Chrome or similar, you should be able to Right-click → Inspect Element. From there you should be able to see the selectors.
The code will look something like this, which you can add into the Custom CSS section of the Theme Settings within the Theme Editor (or to the code itself):
.menu-drawer__menu ~ * {
display: none;
}
Where .menu-drawer__menu ~ * would be replaced with the necessary selector you are using to hide the element.
Frankly, based on the positioning within the screenshot, the snippet I provided may be sufficient.
1 Like
@Dan_Sherrin just wanted to follow up here to see if that bit of code I shared helped point you in the right direction toward completing your task.
@RobDukarski - I’m still waiting for the code to be implemented and tested. Your suggested selector appeared to be correct though.
2 Likes
