[Support request] Close Button at off-canvas menu no aria-lable

[Heinrich]

Hi Team,

To meet all accessibility criteria I need to get rid of one last issue and I don´t know how.
I get the error “WAI-ARIA image is missing alternative text” from the closed button of the off-canvas menu. How can I add the aria-labe=”close” to the svg?

Can you give me a hint on how to solve that?

Thanks in advance

[Fernando]

Hi Heinrich,

Here’s a PHP snippet you can try:

add_filter( 'generate_close_slideout_navigation_button', function() {
	$close_svg = '<svg aria-label="close" viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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"></path>
				</svg>';
    return sprintf(
				'<button class="slideout-exit %2$s">%1$s</button>',
				$close_svg,
				'has-svg-icon'
			);
} );

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Kindly let us know how it goes.

[Heinrich]

Great, thanks that worked!

[Fernando]

You’re welcome Heinrich!

[Author]

Posts