Topic: Accessibility error on SVG mobile menu

websquared
February 17, 2026 at 4:05 am

Hello

So I am seeing accessibility errors for this section

<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" /></svg>

Which is part of the standard menu – its using aria-hidden="true" but that doesn’t seem to fulfil what it needs

It is telling me

G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content
Description
The objective of this technique is to allow users to identify the non-text content even if the non-text content is intended to provide a specific sensory experience. For example, a deaf person may want to know what an audio instrumental file is – even if they cannot hear it. Similarly, a blind person may want to know what the subject of a visual image is – even if they cannot see it.
Location

<svg viewBox=”0 0 512 512″ aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg” width=”1em” height=”1em”><path d=”M0 96c0-13.255 10.745-…</svg>
Fix Recommendation
If you are delivering information to your users, by non text means ( images or video or audio) : you should always be sure that the information can be found by some one that can’t see that image or video, or hear the audio.

Any ideas how to improve and make this accessible? Its part of the standard menus so unsure if its GB/GP issue or something else – but I am not able to make any changes here?

Thank you
Sarah
George
February 17, 2026 at 4:16 am

Hi Sarah.

Can you provide a URL so we can see the issue?
websquared
February 17, 2026 at 5:31 am

Hi George

URL in private box for you – site is behind a holding page but made it live temporarily for you
Its not an error per se – its a WAI accessibility issue that is being flagged up

Thank you
Sarah
George
February 17, 2026 at 9:37 am
Hi Sarah

The SVG you’re seeing is the close icon (X) for the mobile menu toggle button.

Looking at the markup, this is actually implemented correctly from an accessibility standpoint:
```
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
    <span class="gp-icon icon-menu-bars">
        <svg aria-hidden="true">...</svg>
        <svg aria-hidden="true">...</svg>
    </span>
    <span class="mobile-menu">Menu</span>
</button>
```
The button contains visible text (“Menu”) which provides the accessible name, plus aria-controls and aria-expanded attributes for proper state information. The SVG icons are purely decorative, so aria-hidden="true" is the correct approach — it tells assistive technology to skip the icons since the button text already conveys the purpose.

Your WAI checker is being overly aggressive here. It’s flagging the SVG in isolation without recognizing that it sits within a properly labelled button. This is a false positive rather than a genuine WCAG failure.
websquared
February 18, 2026 at 1:54 am

Thank You George – I might have to try a few other WCAG tests then as I need to be compliant and this is blocking it currently – argh frustrating!
George
February 18, 2026 at 2:15 am

Please, check with the provider of the test, as its never came up as an issue before or in recent a11y tests!
websquared
February 18, 2026 at 2:20 am

I will do – thank you – I am now off to sort the “skip to content” issue now too

<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>

Seemingly having the title=”Skip to content” is also wrong as it matches the Link text and therefore not required!

Ahh the joys of trying to make thinsg accessible

Thanks for your help – if they reply with anything suitable I will let you guys know

Sarah

George

February 18, 2026 at 2:44 am

Yes, it can be challenging!

Regarding the skip link — to remove the title attribute, you could remove the default skip link function and replace it with one that doesn’t include the title attribute.

You can use this snippet:

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_before_header', 'generate_do_skip_to_content_link', 2 );
    add_action( 'generate_before_header', function() {
        printf(
            '<a class="screen-reader-text skip-link" href="#content">%s</a>',
            esc_html__( 'Skip to content', 'generatepress' )
        );
    }, 2 );
} );

websquared
February 18, 2026 at 2:49 am

oh perfect thank you – I was looking at editing GP theme files to correct this – so this is much simpler!
George
February 18, 2026 at 2:50 am

Yeah, much cleaner with those actions!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Accessibility error on SVG mobile menu