[#45594] - [6.1] mod_languages: Include visible label in aria-label for accessibility
- Pending
- Medium
- Build: 5.3-dev
- # 45594
- Diff
- wk1337:feature/mod_languages-accessibility-labels
User tests: Successful: Unsuccessful:
Summary of Changes
This Pull Request improves accessibility for speech-input users in the mod_languages module by ensuring the visible text of language links matches the programmatic accessible name (aria-label).
Previously, the aria-label used only the native language name (e.g., Deutsch), while the visible text could be just the language code (e.g., DE). This mismatch breaks voice interaction workflows, where users say what they see to focus interactive elements.
Changes implemented:
• Updated how aria-label attributes are generated in both dropdown and list views.
• The new label format combines the visible text (e.g., EN) with the native name (e.g., English) — e.g., aria-label="EN – English".
• This ensures the visible label is always a substring of the accessible name, satisfying WCAG 2.1 Success Criterion 2.5.3 – Label in Name.
Testing Instructions
1. Enable the language switcher module (mod_languages) on a multilingual Joomla site.
2. Configure it to display language codes (e.g. EN, DE) instead of full names.
3. Use browser developer tools or a screen reader to inspect the aria-label of each language link.
4. Confirm that the visible text (e.g. EN) is included in the aria-label value (e.g. EN – English).
5. Optionally test with speech input or accessibility testing tools.
Actual result BEFORE applying this Pull Request
• aria-label only contained the native language name.
• Visible code (e.g. EN, DE) was not present in the accessible name.
• Speech-input users could not select a language by saying the visible label.
Expected result AFTER applying this Pull Request
• aria-label includes both the visible label and native name (e.g. EN – English).
• Visible label and accessible name match.
• Fully supports speech-based interaction with language selector.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Modules Front End |
| Labels |
Added:
PR-5.3-dev
|
||
| Labels |
Added:
a11y
|
||
@chmst @drmenzelit @brianteeman can you please give feedback to this pr?
This pull request has been automatically rebased to 6.1-dev.
This is a good feature request.
The solution works only for drop-down, not for horiziontal as we have for example in the default Cassiopeia.
It seems that the module has some a general issues which are not in scope of this PR.
Hi @chmst, thanks a lot for your review!
From my side the change now also works for the horizontal list layout (e.g. the default Cassiopeia header). For the list layout the accessible name is built here:
$lbl = '';
if ((($params->get('full_name') === 0) && ($params->get('image') === 0)) || (!$language->image)) {
$lbl = 'aria-label="' . strtoupper($language->sef) . ' – ' . $language->title_native . '"';
}I also agree with you that the module has some more general issues. I tried to keep this PR focused on improving the accessible name only.
| Title |
|
||||||
I have tested this item ✅ successfully on 6fe798e
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45594.
I have tested this item ✅ successfully on 6fe798e
Hi @wk1337, during PBF 2026, Friday, Jan. 30th, with Olivier, we noticed a successful test BUT we want to confirm something we saw,
(this is probably outside of the scope of THIS PR):
BEFORE PR:
<ul aria-labelledby="language_picker_des_122" class="mod-languages__list lang-inline">
<li>
<a aria-label="French (fr-FR)" href="/index.php/fr">
FR </a>
</li>
<li class="lang-active">
<a aria-current="true" aria-label="English (United Kingdom)" href="https://master222.pbf20.org/index.php/en">
EN </a>
</li>
</ul>
AFTER PR APPLIED:
<ul aria-labelledby="language_picker_des_122" class="mod-languages__list lang-inline">
<li>
<a aria-label="FR – French (fr-FR)" href="/index.php/fr">
FR </a>
</li>
<li class="lang-active">
<a aria-current="true" aria-label="EN – English (United Kingdom)" href="https://master222.pbf20.org/index.php/en">
EN </a>
</li>
</ul>
We noticed that there inconsistency in the formatting of the language name (unrelated to the presence of EN - or FR - ):
for French, it is French (fr-FR), but for English, it is English (United Kingdom), instead of what we would expect: English (en-GB) ?
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45594.
@exlemor it is displaying whatever is the value for native language title in the language
Thanks @brianteeman, that is what we figured but wouldn’t consistency be a good idea across all native language titles?
@exlemor it is up to the individual language to define that - as you can see here it is french that is the exception
OK! cool.
So, then the only question is whether the rule or the exception is easiest from a point of view of users/accessibility?
IF it is Persian (Iran), Deutsch (Deutschland), English (United Kingdom) is easier, then we should align things to French (France)...
No comment from me on that as the entire pr would be rejected if it was my decision
This pull request has been automatically rebased to 5.4-dev.