Hi there,
According to https://dequeuniversity.com/rules/axe/3.2/aria-valid-attr-value, which Google links to, true/false
is a valid value, so aria-expanded="false"
appears to be valid.
Based on another resource I found, https://accessibilityresources.org/aria-controls, aria-controls
“use the id of the child element in the parent element to relate each other. ”
So for the button
element, the value for aria-controls
should be the id of the element that’s a child of button
, except in this theme the button
element, which refers to the menu button that appears in the mobile view only, doesn’t have any children.
So I’m not sure how to fix this either, or if it even needs fixing – tools like Lighthouse are designed to look for errors, rather than to check if things are actually working as expected, so they will often highlight stuff that don’t matter in reality. So unless you actually notice problems with using your site, on a mobile device only in this case, using a screen reader, I wouldn’t worry too much about this.
From what I can find online it also appears aria-controls
is only used by the JAWS screen reader, and then only in certain browsers on desktops, not on mobile.
That said, it looks like that specific piece of code lives in the header.php
file of this theme, line 37, so that’s where you’d need to change this. I wouldn’t recommend making changes to the file directly, as that would be lost next time the theme updated. Changes like this are typically best to do using a child theme instead:
https://developer.www.ads-software.com/themes/advanced-topics/child-themes/
For advice on the actual code changes needed, I’d suggest either the advanced forum at https://www.ads-software.com/support/forum/wp-advanced/ or else the WordPress Stackexchange community over at https://wordpress.stackexchange.com/. Support for this theme is provided by Automattic support staff, not developers, so we’re not able to help you with this type of change.