Support » Theme: Sela » Fixing aria code

  • mirelaiepurela

    (@mirelaiepurela)


    Dear all,

    I’ve run an audit on my website, https://www.the-travel-bunny.com, which is using the Sela theme. I used Google’s WebDev tools (Lighthouse), and they highlighted the following accessibility option which is part of the theme’s code:

    [aria-*] attributes do not have valid values
    Assistive technologies, like screen readers, can’t interpret ARIA attributes with invalid values. Learn more.

    Failing Elements
    <button class="menu-toggle" aria-controls="menu" aria-expanded="false">Menu</button>

    I tried reading the stuff they have available at Learn more, but it isn’t enough for a newbie in aria code to fix this issue on her own.

    So please help me fix this accessibility issue. 🙁

Viewing 1 replies (of 1 total)
  • KokkieH

    (@kokkieh)

    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.wordpress.org/themes/advanced-topics/child-themes/

    For advice on the actual code changes needed, I’d suggest either the advanced forum at https://wordpress.org/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.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.