Archived topic
Close Button at off-canvas menu no aria-lable
3 replies · Started by Heinrich on July 14, 2022
Viewing posts 1–4 of 4
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
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.
Great, thanks that worked!
You’re welcome Heinrich!
This archived topic is closed to new replies.
