User tests: Successful: Unsuccessful:
Pull Request for no issue
It is best practice that all content is contained by a landmark. On the login page of administrator the sidebar is not contained by a landmark. This PR will fix this
sidebar-wrapper is not contained by a landmark.sidebar-wrapper is contained in landmark <aside>Landmark <aside> is chosen because sidebar is supplementary support info
<div id="sidebar-wrapper" class="sidebar-wrapper">
<aside id="sidebar-wrapper" class="sidebar-wrapper" aria-labelledby="main-brand">
Please select:
Documentation link for docs.joomla.org:
No documentation changes for docs.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
| Category | ⇒ | Administration Templates (admin) |
I would like to have a landmark here and get rid of this ugly "missing landmark" error.
But am not sure if <aside is correct.
Semantic meaning is "content which is relaed to the main content and supports it".
We can define modules - there we know when the module is related to the main content.
But sidebar could be everything.
Would be interesting to know if the <aside helps blind users and has a meaning
Aside means it is complimentary to the main region but I wonder if it can be considered as complimentary as it has the page h1 in it.
The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside
This suggests it's not the correct landmark region to use here
A <div role="complementary" could match.
A <div role="complementary" could match.
that is the exact same thing as aside https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/complementary.html
Not sure about the arialabel. Will check in more detail later but I don't think it's needed or particularly helpful
I was surprised that the label would identify the text as the referred id is to the div and not the individual text. So that arial label is both the h1 and the h2
In general a region only needs a label if there are more than one on the page but i dont suppose it harms having one anyway.
I wonder if this is the real main region on the page and its the login that is either complimentary or region https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/region.html
My 2 cents here.
As the h1and h2 are in the sidebar-wrapper thingy, I think the aside should be for the <div id="sidebar"> .
But, besides getting rid of the error in automatic detection tools. Does this help to anyone? Everytime I investigate about landmarks I end giving up because of the scarce support hey have in browsers and screen readers.
| Labels |
Added:
a11y
PR-6.0-dev
|
||
I have tested this item ✅ successfully on a692226
I have tested this item ✅ successfully on a692226
I also looked up https://www.w3schools.com/accessibility/accessibility_landmarks.php
It tells that the
element "aside" is missing in above comment
I just dont see how a region with the h1 inside it can ever be considered to be complimentary
I just dont see how a region with the h1 inside it can ever be considered to be complimentary
fair point.
Any suggestions how to get rid of this ugly "missing landmark" error?
| Title |
|
||||||
Thank you for the work on this, pushed to 6.1 as not fixing a bug.
The following text was forwarded to me
This PR #45988 does not solve the problem.
Here is a detailed report (English, Markdown format) of my site for the backend:
Joomla Administrator Login Page
This analysis concerns the accessibility and usability of the Joomla Administrator login page, with particular focus on:
Primary issue:
The only heading that correctly describes the purpose of the page (“Joomla Administrator Login”) is marked as an H2 and is located:
<main> element,The H1 heading (“Polskie Centrum Joomla”):
Impact:
Screen reader users do not receive a clear and immediate answer to the question:
“What is this page for?”
Navigating by headings does not lead users to the login task, and the semantic hierarchy of the page does not reflect its functional purpose.
This affects compliance with:
Current state:
<header> landmark is present and contains branding and global links.<main> element exists but does not include a heading that describes the main content.<aside>, <nav>, or <main>,Impact:
Landmark navigation is ineffective.
Headings are not logically associated with page regions, and the accessibility tree does not reflect the functional structure of the page.
The page serves one primary task: logging in.
Although the form controls are correctly labelled and required attributes are present, the page lacks:
Impact:
This increases cognitive load and reduces clarity, particularly for:
The H1 heading must describe the main purpose of the page and be located within the <main> landmark.
Branding or organisational identification must not replace or override the functional heading of a task-oriented page such as a login screen.
| Element | Recommended role |
|---|---|
| Organisation name | Branding / header content |
| “Administrator Login” | H1 – page purpose |
| Login form | Main content |
| Help and support links | Complementary content () |
<body>
<header role="banner">
<!-- Branding and global links -->
</header>
<main id="main-content">
<header class="page-header">
<h1>Joomla Administrator Login</h1>
</header>
<section aria-labelledby="login-form-heading">
<h2 id="login-form-heading" class="visually-hidden">
Login form
</h2>
<!-- Login form -->
</section>
</main>
<aside aria-labelledby="support-heading">
<h2 id="support-heading">Help and support</h2>
<nav aria-label="Support links">
<ul>
<li><a href="…">Joomla Support Forum</a></li>
<li><a href="…">Joomla Documentation</a></li>
<li><a href="…">Joomla News</a></li>
</ul>
</nav>
</aside>
</body>
After that I received a draft of the login page standard that was developed.
Accessibility and Usability Requirements
1.0
This standard defines the minimum accessibility and usability requirements for login pages to the administrative or backend area of a website, including CMS platforms (e.g. Joomla, WordPress, Drupal).
The login page is treated as a task-oriented page with a single primary purpose: user authentication.
The structure of the login page must clearly communicate its purpose and allow users to immediately identify:
This must be achieved through correct use of headings, landmarks, and semantic relationships, independent of visual layout.
<main> landmark.The page must use landmarks to expose its functional structure to assistive technologies.
<header role="banner"><main><aside><nav><header> or <aside> for grouped links.Content must not be placed outside landmarks unless it is purely decorative.
<main>.aria-labelledby.<label> elements.autocomplete values.<aside> landmark,This standard ensures:
The following patterns are non-conformant:
<main>.This standard can be implemented without visual redesign.
All requirements concern semantic structure and accessibility metadata only.
| Labels |
Added:
PR-6.1-dev
Removed: PR-6.0-dev |
||
My question is... do you all agree with the provided information? And if so... I will adjust this PR to meet the requirements setup in the provided draft.
My question is... do you all agree with the provided information? And if so... I will adjust this PR to meet the requirements setup in the provided draft.
Absolutely - I've said the same myself in the past as have others
| Category | Administration Templates (admin) | ⇒ | Administration Language & Strings Templates (admin) Repository NPM Change |
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2026-03-01 15:29:48 |
| Closed_By | ⇒ | hans2103 | |
| Labels |
Added:
Language Change
NPM Resource Changed
|
||
| Status | Closed | ⇒ | New |
| Closed_Date | 2026-03-01 15:29:48 | ⇒ | |
| Closed_By | hans2103 | ⇒ |
| Status | New | ⇒ | Pending |
The PR has been adjusted, based on J6.1-dev
contains a change in language string
With the suggestions as described in #45988 (comment)
| Requirement | Status |
|---|---|
§2.1 — Exactly one H1, inside <main>, describes task |
✅ Visually-hidden H1 "Joomla Administrator Login" inside main |
| §2.1 — Branding not used as H1 | ✅ Site name is <p class="h1"> (not a heading element) |
| §2.2 — Headings not outside landmarks | ✅ H1 in main, H2 in aside |
§3 — <header> banner landmark |
✅ |
§3 — <main> with H1 + form |
✅ |
§3 — <aside> for complementary content |
✅ |
| §3 — No content outside landmarks | ✅ login_message moved inside main |
§4.1 — Form inside <main> |
✅ |
| §5 — Branding not replacing functional H1 | ✅ |
| §6 — Aside labeled | ✅ via aria-labelledby pointing to visible H2 (login.php) / visually-hidden H2 (error_login.php) |
| Visual parity | ✅ Sidebar shows both site name (white, large) and "Joomla Administrator Login" (light, normal weight) |
I have tested this item ✅ successfully on 52bf793
I have tested this item ✅ successfully on 52bf793
Tested light and dark mode
Tested LTR and RTL
| Status | Pending | ⇒ | Ready to Commit |
RTC
thanks
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2026-03-04 18:43:48 |
| Closed_By | ⇒ | HLeithner | |
| Labels |
Added:
Feature
RTC
|
||
I agree with adding the landmark. Not sure about the arialabel. Will check in more detail later but I don't think it's needed or particularly helpful