[#48374] - Atum / Install Joomla: Missing/Misleading text alternative for logo image
- New
- Medium
- Build: 5.4-dev
- # 48374
Steps to reproduce the issue
| Milestone 1a finding ID | M1a-001 |
|---|---|
| Backlog priority | High |
| Severity — carried from Milestone 1a | Serious |
| Implementation effort | Medium |
| Target milestone(s) | MS7a — Installation and Setup; MS7b — Atum and Cassiopeia Template Build |
| WCAG 2.2 success criterion | 1.1.1 Non-text Content; 2.5.3 Label in Name |
| Responsibility tag(s) from report | Development |
| Affected Joomla area/component | Atum and Installation — Joomla logo text alternative and Dashboard link — Milestone 1a finding #1 |
| Affected user journey(s) | 01 — Backend Template (Atum); 05 — MFA Setup - Method / Methods Views; 06 — Media Manager (com_media); 07 — Installer Wizard (com_installer/Install); 08 — Backend List View Pattern; 09 — Backend Edit Form Pattern; 11 — Backend Options including Permissions; 13 — Install Joomla |
Audit finding
On the Atum Home Dashboard, the Joomla logo image has an empty alt attribute and is not a link.
On other administrator pages, the logo is a link with the accessible name Back to Dashboard.
The report identifies two concerns:
- The Dashboard link is not consistently available across pages.
- The link's accessible name does not include the visible “Joomla!” text, which can make voice-input activation difficult.
The report recommends treating the logo like the Home Dashboard link: keep it as a link on the Dashboard, include both the visible “Joomla!” text and “Home Dashboard” in its accessible name, and use aria-current="page" when the user is already on the Dashboard.
The report also identifies an empty alternative-text issue for the Joomla logo in the Installation flow and in editor headers.
User impact
Screen-reader users may encounter an unlabelled logo on the Dashboard and cannot understand its purpose.
On other pages, they hear “Back to Dashboard” but not the visible Joomla branding. This creates an inconsistent orientation point across the administrator interface.
Voice-input users may try to activate the control by saying “Joomla” because that is the visible text, but the accessible name does not contain it.
In the Installation flow and editors, an empty logo alternative means screen-reader users receive no information about the branding image.
Remediation plan
Provide consistent logo semantics and a complete accessible name
- Provide a complete, translatable text alternative for the Joomla logo in the Atum header, Installation flow, and editor headers
- Ensure the alternative text conveys the logo's purpose
- Make the logo's Dashboard-link behaviour consistent across administrator pages
- Decide whether the logo should be a link on the Dashboard; if it remains a link, use
aria-current="page"to identify the current page - Ensure the accessible name includes the visible “Joomla!” text
- Ensure the accessible name also describes the link destination, such as “Home Dashboard”
- Ensure the accessible name does not conflict with the visible label
- Ensure the logo image does not introduce duplicate or contradictory announcements
- Preserve a visible focus indicator when the logo is a link
- Apply the same pattern to the shared Atum header and Installation templates
- Verify the behaviour on the Dashboard and on representative non-Dashboard pages
Preconditions
- Use Joomla 6.2 with the Atum administrator template and the Joomla Installation flow
- Use a test installation where the installation screens and administrator dashboard can be accessed safely
- Sign in with an account permitted to view the administrator dashboard
- Open at least one editor, such as Content → Articles → New
- Record the exact Joomla build, browser name and version, operating system, viewport dimensions, and browser zoom
- Record the screen reader and browser combination if testing announcements
- Start at 100% browser zoom
- Record the active appearance and any template overrides or custom CSS
Steps to reproduce
- Open the Joomla Installation flow
- Locate the Joomla logo or branding image
- Inspect the image using Developer Tools
- Record its
altattribute and computed accessible name - Navigate to the image with a screen reader and record the announcement
- Complete installation in a test environment and sign in to the administrator interface
- Open the Home Dashboard
- Locate the Joomla logo in the Atum header
- Inspect the image and record its
altattribute, accessible name, and whether it is a link - Record whether a Dashboard link is available in the header
- Navigate to another administrator page, such as Content → Articles
- Inspect the logo and record whether it is now a link
- Record the link's accessible name and destination
- Compare the Dashboard and non-Dashboard behaviour
- Open Content → Articles → New
- Locate the Joomla logo in the editor header
- Inspect the image and record its
altattribute and accessible name - Capture the logo markup, accessible names, and screen-reader announcements for each context
Screen-reader verification
- Use a screen reader with the browser combination being tested
- Navigate to the Joomla logo on the Installation screen
- Record the announced information
- Navigate to the logo on the Atum Home Dashboard
- Record whether it is announced as an image, link, or both
- Record its accessible name and whether the Dashboard destination is conveyed
- Navigate to the logo on a non-Dashboard administrator page
- Record the announced link name and destination
- Compare the announcements across pages
- Repeat for the editor header logo
- Repeat with at least one additional screen reader if available
- Record the screen-reader name, version, browser, and operating system
Verification after remediation
- Open the Installation flow and confirm that the Joomla logo has a complete, translatable text alternative
- Open the Atum Home Dashboard and confirm that the logo's purpose and Dashboard relationship are conveyed
- Confirm that the accessible name includes the visible “Joomla!” text
- Confirm that the Dashboard link behaviour is consistent across administrator pages
- If the logo remains a link on the Dashboard, confirm that
aria-current="page"is present - Confirm that the accessible name describes the destination without conflicting with the visible label
- Open an editor and confirm that its Joomla logo has a complete text alternative
- Record the final markup, accessible names, and screen-reader announcements
Version
6.2
Expected result
The Joomla logo has a complete, translatable text alternative wherever it appears.
In Atum, the logo's Dashboard-link behaviour is consistent across pages. Its accessible name includes the visible “Joomla!” text and clearly identifies the Dashboard destination.
When the user is on the Dashboard and the logo remains a link, aria-current="page" identifies the current page.
Actual result
On the Atum Home Dashboard, the Joomla logo has an empty alt attribute and is not a link.
On other administrator pages, the logo is a link named “Back to Dashboard”, which does not include the visible “Joomla!” text.
In the Installation flow and editor headers, the Joomla logo has an empty text alternative.
The current Joomla 6.2 build needs to be checked to establish whether the issue persists in each affected context.
What device were you using? (eg, phone, laptop)
Desktop web
What web browser were you using? (eg, Chrome, Safari)
Chrome, Firefox, Edge, Safari
Assistive Technology?
VoiceOver, JAWS, NVDA
Additional Comments
The browser and assistive-technology entries above are carried forward from the original issue and do not represent a new verification of every combination against Joomla 6.2.
Development is the responsibility tag in the original report.
The report's suggested alternative text, “Joomla! – Home Dashboard”, is one possible approach. Verify the final wording against the visible branding and the chosen link behaviour.
This issue concerns the Joomla logo's text alternative and Dashboard-link consistency. It is distinct from #48373, which concerns the missing alternative text for the MFA setup QR code.
MS7a is proposed for the shared Installation and setup pattern, with MS7b covering the documented Atum integration.
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
a11y
|
||
| Labels |
Added:
a11y-priority-serious (High)
|
||
rdeutz
- | Labels |
Added:
a11y-audit-backlog
|
||
Hi! I’d like to work on this issue. Could you please assign it to me
Hi! I’d like to work on this issue. Could you please assign it to me
| Title |
|
||||||
| Labels |
Added:
a11y-ms1b-quickwins
|
||
| Labels |
Removed:
a11y-ms1b-quickwins
|
||
I think there are a couple of things worth reconsidering in the proposed remediation.
Firstly, is the problem missing or misleading alternative text? These are two different issues and should be identified separately.
There is also no real benefit in making the logo a link on the Dashboard itself. Clicking a link to return to the page you are already on serves no useful purpose and simply adds another focusable element to the page.
Another important consideration is that the logo is configurable. Site owners can replace the Joomla logo with their own image and specify their own alternative text. Hardcoding "Joomla! – Home Dashboard" as the accessible name would therefore be potentially misleading and would disregard the site's own branding.
I would suggest distinguishing between the alternative text describing the image and the accessible name describing the purpose of the link.
The image's alt attribute should describe the logo, using the alternative text supplied by the site owner, or "Joomla!" when the default logo is used. The link's aria-label should combine that description with a translatable string describing its destination.
For example:
Default Joomla logo:
<a href="index.php"
aria-label="Joomla! - Back to Dashboard">
<img src="joomla-logo.svg" alt="Joomla!">
</a>Custom logo:
<a href="index.php"
aria-label="MyCMS - Back to Dashboard">
<img src="custom-logo.svg" alt="MyCMS">
</a>An important technical distinction is that an aria-label on the link takes precedence over the accessible name derived from its contents. The image's alternative text is therefore not automatically included in the link's accessible name. We need to explicitly construct the aria-label from both parts.
My suggested resolution would therefore be:
- Keep the logo as a link on administrator pages except the Dashboard itself.
- Respect the site owner's configured alternative text, with an appropriate fallback for the default Joomla logo.
- Construct the link's
aria-labelfrom the logo description and a translatable "Back to Dashboard" string. - Avoid making the logo a redundant link when the user is already on the Dashboard.
I think this addresses the actual accessibility concerns without imposing Joomla-specific branding on sites that have chosen to customise their administrator experience.
Agree with
Keep the logo as a link on administrator pages except the Dashboard itself.
Avoid making the logo a redundant link when the user is already on the Dashboard.
For the aria-label I would always use the sitename. It is known after installation.
The dashboard controls a site, it does not control Joomla.
The alt-text is completely in the responsibility of the site's administrator. Many sites use their own logo and replace the file joomla-logo.svg with their own logo, The filename says nothing about the content of the image.
I suggest an empty alt-text after Installation.
While the logo on public pages needs a describing alt-text, it is redundant in Atum.
Users who have backend access are administrators and should know the logo of their own company.
If an alt-text describes the logo - good.
If the alt-text is empty, then at least it is not misleading.
<a href="index.php"
aria-label="MySitename - Back to Dashboard">
<img src="joomla-logo.svg" alt="">
</a>
The filename says nothing about the content of the image
Sorry if it wasn't clear in my description. I was referring to the logo containing text and that it's a wcag requirement when an image contains text that the text is made available to a screen reader. In other words you wouldn't need to say joomla if it was just the small logo but you do if it's the larger logo with text.
(And now I reread what I've just written I'm still not sure I explained it correctly)
I understand - and probably it is correct to use the alt-text "joomla" for installation.
Then the user has to change this when he overwrites the joomla svg with his own svg.
We cannot ddo more and we cannot programmatically decie if the alt-text describes the image in a customer's site.
I understand - and probably it is correct to use the alt-text "joomla" for installation.
Then the user has to change this when he overwrites the joomla svg with his own svg.
We cannot do more and we cannot programmatically decie if the alt-text describes the image in a customer's site.
There are just a couple of things I'd like to say about this since I tried to make a resolution via a PR already.
- Making the image a link and adding
aria-currentserves as a consistent navigation anchor for users. Why does it exist as a link in some pages and not others? Even in the "Edit Articles" flow, you want to prevent users from leaving the page without saved changes. I get that, but they can already do that if they use the "Cancel" button, But isn't a common method to avoid this having a dialog that indicates there are unsaved changes on a page and navigating away will discard those changes? Allowing a user to use the "Cancel" button without such a dialog results in some frustration, too, even if we don't consider accessibility and only think about the user experience. Warning dialogs aren't a bad idea. TL;DR: We can't assume that all users have the same understanding of an interface at all times. I personally only see value in making it a link, but I won't argue for this more than I already have. - A great thing you do is allow the admin to add custom alt text to their image. That's wonderful, and a critical part of ATAG, so well done there. It's the conveyance of the correct messaging at the right time to assistive technology that proves the technical challenge. You're absolutely right to say you can't programmatically decide if the
altdescribes the image in a customer's site, @chmst, so the best you can do is what you're doing: give them the option to enter thealtvalue themselves.
Why does it exist as a link in some pages and not others? Even in the "Edit Articles" flow, you want to prevent users from leaving the page without saved changes.
No that is NOT the reason. When you open an article it is locked to prevent someone else editing the same article. When you Save or Cancel the edit then the lock is removed. Any other method eg browser back keeps the article checked out preventing any other user from editing the article. We cant prevent the browser back button but we can prevent Joomla offering a way to quit without removing the lock - thats why we do what we do. Not for the reason you stated!!
<?php // No home link in edit mode (so users can not jump out) and control panel (for a11y reasons) ?>
So you don't want to prevent users from leaving the page with unsaved changes...? This comment in the index.php code is a bit confusing then and doesn't describe the reason you just stated.
describes it perfectly for me - as i said it is nothing to do with unsaved changes - if it was then the comment would have said that
Is it missing or misleading - it cant be both