[#46792] - Issue #46743 Fix: Add alt text and dimensions to Languages module images
- Pending
- Medium
- Build: 5.4-dev
- # 46792
- Diff
- chaitali-tekdi:Issue#46743
User tests: Successful: Unsuccessful:
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:
- Better accessibility
- No PageSpeed errors
- Correct default behavior in core module
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Modules Front End |
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.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46792.
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
Please remove the RTC status (again) this should NEVER be merged
| Status | Ready to Commit | ⇒ | Pending |
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.
| Labels |
Added:
Updates Requested
PR-5.4-dev
|
||
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.
So at the end it seems that only the width and height attributes are useful.
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
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
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.