[6.2] Issue #46743 Fix: Add alt text and dimensions to Languages module images

[chaitali-tekdi]

Pull Request for Issue #46743 .

Issue Summary

The Languages module (mod_languages) was rendering language flag images without required accessibility attributes.

What was wrong earlier

tags were missing:

alt attribute (accessibility issue)

width and height attributes (performance / PageSpeed issue)

Even when the full_name parameter was enabled, the alt text was either:

empty, or

not rendered at all

This caused:

PageSpeed Insights warnings

Accessibility (WCAG) violations

Layout shift risk due to missing image dimensions

Example of incorrect output:

---

What has been fixed

Added proper alt text using the native language title

Added title, width, and height attributes to the image output

Ensured accessibility compliance and better performance by default

No override is required anymore to fix PageSpeed or accessibility errors

Updated code implementation

image . '.gif', $language->title_native, [ 'title' => $language->title_native, 'width' => '18', 'height' => '12' ], true ); ?>

---

Result

Expected output is now correctly rendered as:

1. Better accessibility
2. No PageSpeed errors
3. Correct default behavior in core module

[Pranita-Zalli]

I have tested this item ✅ successfully on 700e7f9

I have tested this item ✅ successfully on 5.4-dev

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46792.}

[RickR2H]

I have tested this item ✅ successfully on 700e7f9

Not the most charming solution but good for now I guess.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46792.}

[RickR2H]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46792.}

[brianteeman]

Sorry but this PR is completely wrong. In the dropdown mode of the language selector the flags are purely decorative and the current code is correct. Adding an alt attribute serves no purpose and should not be used on decorative images. Additionally setting a title on the image so that the language name is displayed on hover serves no purpose as the language name is displayed already.

Please remove the RTC as it should not be merged in its current form

[muhme]

@chmst Could you clarify the intention of this PR? Is it meant to fix a bug, introduce a new feature, or is it possibly not really needed?

[brianteeman]

@chmst Could you clarify the intention of this PR? Is it meant to fix a bug, introduce a new feature, or is it possibly not really needed?

it is not that its not needed it is simply WRONG!!!

[brianteeman]

Please remove the RTC status (again) this should NEVER be merged

[richard67]

Back to pending. Decorative images shall not have an alt text.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46792.}

[richard67]

P.S.: Find all changes to be made in this comment above:

In the dropdown mode of the language selector the flags are purely decorative and the current code is correct. Adding an alt attribute serves no purpose and should not be used on decorative images. Additionally setting a title on the image so that the language name is displayed on hover serves no purpose as the language name is displayed already.

[richard67]

So at the end it seems that only the width and height attributes are useful.

[richard67]

Finally, if this PR is corrected so that only adding the image height and width attributes is remaining, it is not a bug fix but an enhancement, so it should be rebased to 6.1-dev. We will do that as soon as appropriate in the next days. See also here for the rules for choosing the base branch: https://github.com/joomla/joomla-cms?tab=readme-ov-file#which-branch-should-my-pull-request-target

[brianteeman]

So at the end it seems that only the width and height attributes are useful.

Even that is debatable. The purpose of specifying the size is so that the browser can reserve a fixed space for the image while it is being loaded to prevent layout shifts. This is useful for large images. For such tiny images it is doubtful that any layout shift could ever be measured.

Just close this pr and if someone wants to add the dimensions then they can do that to the correct branch

[HLeithner]

This pull request has been automatically rebased to 6.2-dev.

[MacJoom]

Thanks for the PR @chaitali-tekdi, and sorry it didn't work out.

In dropdown mode the flag is always followed by the language name or SEF code, so it's decorative — alt="" is correct as it stands, and adding the name makes screen readers announce it twice. Same for title, which duplicates visible text.

The hardcoded 18×12 isn't safe either: en_nz.gif and kk_kz.gif are 18×9 and eu_es.gif is 18×10, so those would be stretched.

Closing this one, but thanks for taking the time to look at it — please do keep contributing.