Accessibility issue with WPML language switcher in mobile menu

[prokreeger]

Hello,

I have an accessibility issue with WPML language switcher in Mobile Menu.

For example, given the icon markup <img alt="English">, the adjacent text also says “English”. In such a scenario, a screen reader will announce this content to the user as “English English”. The redundancy is unnecessary and potentially confusing:

<a href="https://www.example.com/" class="woodmart-nav-link">
    <img src="https://www.example.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/de.svg" alt="English" class="wd-nav-img">
    <span class="nav-link-text">English</span>
</a>

Must be something like this:

<a href="https://www.example.com/" class="woodmart-nav-link">
    <img src="https://www.example.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/de.svg" alt="English flag icon" class="wd-nav-img">
    <span class="nav-link-text">English</span>
</a>

Is there any hook or filter to change this? Or can you provide a fix through Woodmart patcher.

• This topic was modified 1 month ago by prokreeger.
• This topic was modified 1 month ago by prokreeger.
• This topic was modified 1 month ago by prokreeger.

Attachments:

You must be logged in to view attached files.

Hello,

You can change it on your website by copying the function woodmart_get_wpml_languages_in_mobile_menu from the parent theme, which is located in inc/integrations/wpml.php on line 255 and adding the child theme to function.php and modernizing it there as you need.

In our theme it’s developed in the same way as in the WPML – https://monosnap.com/file/kD08cb8saTu4KS2snEG7pp1u7prTGQ

Kind Regards

Thanks for the quick solution.

I’ve added function that you said to my function.php, make some changes and there is no accessibility issue now.

Hello,

You are welcome! Always remember that you can reach out to us with any questions you may have.

Have a good day!

Kind Regards

[Author]

Posts