On a J4.1 website, publish a Language Switcher.
Lighthouse > accessibility was 100% and should stay 100%.
Lighthouse > accessibility goes down to 84%
See detail & screenshot hereafter:
I first shared this information in the A11Y group on Glip / Ring Central where @chmst proposed me to open the issue here.
I share hereafter the first analysis by @drmenzelit:
One problem with the language switcher is that the ul is defined as role="listbox" but the role="option" is not in the li element, but in the a element inside the li... Another problem is the listbox has more than one tabbable element... it seems that in a list the user should be able to navigate between the elements with other key then Tab
"The primary keyboard navigation convention uses Tab and Shift+Tab
key commands to move focus from one UI component to another. Other keys
(primarily the arrow keys) move focus within components comprised of
multiple focusable elements. Authors must follow this convention and
provide no more than one tab stop per component (providing keyboard
focus)."
If I'm not wrong, we used this: https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html
as guide for the dropdown variant of the language switcher, and that seems to be deprecated now...
Labels |
Added:
No Code Attached Yet
|
Labels |
Added:
a11y
|
I forgot to mention explicitely:
<div class="mod-languages">
<p class="visually-hidden" id="language_picker_des_195">
Sélectionnez votre langue
</p>
<ul role="listbox" aria-labelledby="language_picker_des_195" class="mod-languages__list lang-inline">
<li class="lang-active">
<a aria-current="true" role="option" aria-label="Français (FR)" href="https://www.mydomainname.com/fr/">
FR
</a>
</li>
<li>
<a role="option" aria-label="English (UK)" href="/en/"> EN </a>
</li>
<li>
<a role="option" aria-label="Nederlands" href="/nl/"> NL </a>
</li>
</ul>
</div>
Remove the role="option"
A link should not change it's role (unless someone is doing it on purpose. Also it should be wrapped in a nav
element as it is essential navigation and last the role="listbox"
is also wrong
What about this solution: https://russmaxdesign.github.io/language-switcher/
And how would that work if you have 4 or more languages
I don't understand the question... We have 2 options now: dropdown or horizontal list. I'm talking of replacing the horizontal list with the radio buttons. It is semantically correct and the user can navigate through the option with the arrow keys, what is correct. Making keyboard navigation inside the list is much more complicated: https://w3c.github.io/aria-practices/#kbd_general_within
But it is only a suggestion I found as reading more about this topic.
@dgrammatiko is correct about the role being incorrect. please test #37483
I don't understand the question... We have 2 options now: dropdown or horizontal list.
I'm talking of replacing the horizontal list with the radio buttons. It is semantically correct and the user can navigate through the option with the arrow keys.
Just to clarify in case anyone thinks about these things ...This is really wrong for a website frontend.
The "language" switcher must renders links with a real URL that can be indexable by search engine, or will break the whole multilanguage SEO, bacause you loose destination urls to the other languages.
A "language switch" is not a UI interaction like in an APP or in "admin backend", but it's a navigation to a new url.
Google says "Consider adding hyperlinks to other language versions of a page" in the SEO guidelines.
(in fact we no longer use language dropdown on SEO and UX driven websites, it is an anachronistic thing)
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-04-04 15:15:51 |
Closed_By | ⇒ | drmenzelit |
I can confirm the Lighthouse problem with Joomla 4.1.2.
But, about the "Tables and lists" problem (missing UL or OL), i think it's a detection problem.
I see this code generated in my 4.1.2 website with the standard mod_languages: