Hi! We have a site in progress and were audited by an accessibility consultant, which brought up this issue. We need to solve this before we can launch.
I am trying to:
Make the custom language switcher open on hover and click, while allowing screen readers to select the menu and sub-menu items with the keyboard using TAB, ENTER, ESC, and ARROWS.
Link to a page where the issue can be seen:
hidden link
I expected to see:
Focus behavior on the menu with the ability to focus sub-items as well and select them with the keyboard as well as escape out of the menu if desired.
Instead, I got:
Focus on the menu, which opened the menu with tab-index="0", but the sub-items do not have tab-index and click behavior does not work when the WPML setting is for dropdown in the WPML > Language settings.
When I switch to "Dropdown Click" the menu and sub-items are not focusable with the keyboard at all...
Languages: English (English )Spanish (Español )German (Deutsch )
Timezone: America/Lima (GMT-05:00)
I can recreate the issue even when using the default menu language switcher and the issue occurs in the site's default language as well.
As soon I am on the dropdown and select the "Down" button the whole page scrolls, and I can not select a dropdown item.
I see on your site we can select the dropdown item by pressing the tab again while on the dropdown. Did you implement this with custom code?
Please answer this question and let me know how you achieved the behavior. I will further consult our product manager about this issue, as this might need to be considered as a feature request.
We added some custom CSS for :hover and :focus to reveal more of the dropdown and styled it up a bit. But I am not able to select the dropdown item with TAB key.. (I am on Firefox if that matters). The first tab only opens the dropdown, but the following tabbing moves to the next element on the screen altogether.
To add click behavior, I'm assuming, we'd need to add a JS event listener and combat the issue of CSS vs JS events. I attempted with toggling an "active" class on mouseenter, mouseleave, hover, and focus, but did not spend much time on it and still had some conflicts.
Languages: English (English )Spanish (Español )German (Deutsch )
Timezone: America/Lima (GMT-05:00)
Thank you very much for your feedback.
I have submitted a feature request to our team and I will contact you once I receive feedback.
Manage Cookie Consent
We use cookies to optimize our website and services. Your consent allows us to process data such as browsing behavior. Not consenting may affect some features.
Functional
Always active
Required for our website to operate and communicate correctly.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
We use these to analyze the statistics of our site. Collected information is completely anonymous.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
These cookies track your browsing to provide ads relevant to you.