[Resolved] Accessibility issue with WPML language switch menu
This thread is resolved. Here is a description of the problem and solution.
Problem: The client reported accessibility issues with the WPML language switcher on their website, specifically concerning WCAG errors related to ARIA roles. The issues included incorrect roles for
elements and inappropriate role attributes for elements. Solution: We resolved these accessibility issues in the latest version of WPML (4.9.0). To update, follow these steps: 1. Go to Plugins → Add New Plugin in your site’s admin and click the Commercial tab. 2. Click the Check for updates button. 3. Select WPML 4.9 from the list and click Install. Please ensure to back up your site before updating. More details on WPML 4.9.0 can be found here: WPML 4.9.0 Changelog.
If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at WPML Known Issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
Background of the issue:
I am trying to ensure high accessibility standards (WCAG 2.2 AAA + Best practice) on our website, convera.com, where we use a WPML Language switcher called from a custom plugin. The language switcher can be seen on the page next to the text 'Choose your language' at the URL hidden link. The code used is: do_action('wpml_add_language_selector');
Symptoms:
There are accessibility issues reported in the WPML language switcher menu. Specifically, WCAG errors include: 1. Certain ARIA roles must contain particular children. 2. Certain ARIA roles must be contained by particular parents.
To resolve above, the expected behavior is for <LI> elements to have the role 'group' instead of 'none', and for the <SPAN> element to not have a 'role' attribute.
Questions:
Need WPML team to review my suggestion and implement if found helpful in the WPML language switcher menu template.
We need to replicate this issue on a fresh WordPress installation. Then I'll be able to escalate it to our second-tier supporters. To achieve this, I created a test website with a clean WordPress installation. You can access it through this link:
hidden link
With this link, you'll be directly logged in.
Could you please install your custom plugin that adds the Language Switcher in the menu and see if the issue is replicable on a clean WordPress installation?
I've configured WPML to have English as the default language and French as the second language.
When everything is finished and you can replicate the problem, please let us know.
Important! Do not import your site to the test site. We must replicate the problem on a fresh, clean WordPress installation.
Kindly update on the status. We are widely using this plugin on our website i.e. numerous pages and hence the number of errors is increasing day by day.
First of all, I cant access the link you shared.
Second, in our plugin what we are doing is just calling WPML menu via code below
do_action('wpml_add_language_selector');
You can implement the menu using the code above and test. One menu is available on page you can install RAMP chrome extension and perform a test on page with menu by right clicking on page and perform the top most level test i.e. WCAG 2.2 AAA + Best practice and view the results to find recommendations for accessibility.
hidden link
What I have suggested previously are minor changes to HTML attributes of your plugin which resolve the issue.
Please let me know if you need more info or have questions. We want to resolve this issue quickly.
Hi, and thanks for the information you have provided.
I replicated this problem on a sandbox site and escalated it to our second-tier supporters. I'll keep you updated here on any news regarding this issue.
This issue has been escalated to our developers.
They will check it and include a fix to it in future versions of WPML.
We will update you when a fix for this issue is released.
I can see that our developers are already looking into this. However, I'm not in a position to tell when it will be released. We will keep you updated here.
As per last update your developer team is working on new version. I am following up because due to this particular functionality, which is heavily used on website, the errors in the accessibility system are increasing and currently more than 2000. This affects our website score and we would like it to be resolved soon.
Kindly work on releasing the new version with fixes so it can help resolve our website issues as well. We would like to know a tentative timeline for fixes so that we can plan accordingly alternate method to fix the issues.
The fix for this is planned for inclusion in WPML version 4.9. To the best of my knowledge, this version should be released as a beta version in a few weeks. And if things go right, the stable version will be released in January. Please understand that I can't promise anything, and things are up to our developers.
I have used the WPML plugin beta version (WPML Multilingual CMS - Version 4.9.0-b.2 ) on local system but it did not resolve the issue I reported. There has been no change in the HTML code.
Is there any other release that is pending? Please share the update so that we can think of solution is it is going to take longer than a month from now.
As explained previously this issue fix is important for our website's accessibility score and it has dropped to lowest since 2 years and errors are increasing day by day because it is used on blog pages and those are increasing every day.
Please understand the importance and share an update with an accurate timeline.
I just tested this on a fresh WordPress installation with WPML, and I do see a change in the code. On my test site, the beta version is 4.9.0-b.3. Please check it here. hidden link
There is no 'role' attribute for the 'span' element with the class 'wpml-ls-native', which is what you said was expected. However, the 'role' attribute is also missing for the parent 'il' element. You said you expect to see the role="group". Please see the attached screenshot.
You can check my test site admin with this link: hidden link
Can you please confirm that the remaining issue is that the role="group" attribute is missing from the <il> element?
I'll then consult with our second-tier supporter about it.
I tested the 4.9.0-b.3 version on my machine and I think it would resolve the issue but due to recent changes to our IT policy I am not able to test on my local about the accessibility issues so please give me bit more time to check on my PC and confirm back.
So far change looks good to me. I will re-post to confirm in few hours from now.
