Feature RTC Language Change a11y NPM Resource Changed PR-6.1-dev Pending

User tests: Successful: Unsuccessful:

avatar hans2103
hans2103
26 Aug 2025

Pull Request for no issue

Summary of Changes

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

Testing Instructions

  • Go to Joomla Administrator
  • Open Dev Tools
  • notice that element with className sidebar-wrapper is not contained by a landmark.
  • Apply the PR
  • Refresh login page
  • Open Dev Tools
  • notice that element with className sidebar-wrapper is contained in landmark <aside>

Landmark <aside> is chosen because sidebar is supplementary support info

Actual result BEFORE applying this Pull Request

        <div id="sidebar-wrapper" class="sidebar-wrapper">

Expected result AFTER applying this Pull Request

        <aside id="sidebar-wrapper" class="sidebar-wrapper" aria-labelledby="main-brand">

Link to documentations

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

avatar hans2103 hans2103 - open - 26 Aug 2025
avatar hans2103 hans2103 - change - 26 Aug 2025
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 26 Aug 2025
Category Administration Templates (admin)
avatar brianteeman
brianteeman - comment - 26 Aug 2025

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

avatar chmst
chmst - comment - 26 Aug 2025

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

avatar brianteeman
brianteeman - comment - 26 Aug 2025

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.

avatar brianteeman
brianteeman - comment - 26 Aug 2025

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

avatar chmst
chmst - comment - 26 Aug 2025

A <div role="complementary" could match.

avatar brianteeman
brianteeman - comment - 26 Aug 2025

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

avatar brianteeman
brianteeman - comment - 26 Aug 2025

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

avatar carcam
carcam - comment - 28 Aug 2025

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.

avatar hans2103 hans2103 - change - 30 Aug 2025
Labels Added: a11y PR-6.0-dev
avatar ceford ceford - test_item - 17 Sep 2025 - Tested successfully
avatar ceford
ceford - comment - 17 Sep 2025

I have tested this item ✅ successfully on a692226


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.

avatar ThomasFinnern ThomasFinnern - test_item - 28 Nov 2025 - Tested successfully
avatar ThomasFinnern
ThomasFinnern - comment - 28 Nov 2025

I have tested this item ✅ successfully on a692226

I also looked up https://www.w3schools.com/accessibility/accessibility_landmarks.php
It tells that the

shall be used for content related to the main content.
For me it looks valid
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.

avatar ThomasFinnern
ThomasFinnern - comment - 28 Nov 2025

element "aside" is missing in above comment


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.

avatar brianteeman
brianteeman - comment - 28 Nov 2025

I just dont see how a region with the h1 inside it can ever be considered to be complimentary

avatar hans2103
hans2103 - comment - 2 Dec 2025

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?

avatar Bodge-IT Bodge-IT - change - 17 Dec 2025
Title
[6.0] - a11y - Contain page content by landmark
[6.1] - a11y - Contain page content by landmark
avatar Bodge-IT Bodge-IT - edited - 17 Dec 2025
avatar Bodge-IT
Bodge-IT - comment - 17 Dec 2025

Thank you for the work on this, pushed to 6.1 as not fixing a bug.

avatar hans2103
hans2103 - comment - 1 Mar 2026

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:

Accessibility and Usability Analysis

Joomla Administrator Login Page

1. Scope of the analysis

This analysis concerns the accessibility and usability of the Joomla Administrator login page, with particular focus on:

  • heading structure,
  • landmark usage,
  • semantic relationship between headings and main content,
  • user orientation, especially for screen reader users.

2. Key accessibility and usability issues

2.1. Heading structure and content identification

Primary issue:

The only heading that correctly describes the purpose of the page (“Joomla Administrator Login”) is marked as an H2 and is located:

  • outside the <main> element,
  • outside any landmark region,
  • within a sidebar-like container that does not represent the main task of the page.

The H1 heading (“Polskie Centrum Joomla”):

  • does not describe the main content or task of the page,
  • serves as organisational or branding information,
  • is also placed outside the main content area.

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:

  • WCAG 2.4.6 – Headings and Labels
  • WCAG 1.3.1 – Info and Relationships
  • indirectly WCAG 2.4.1 – Bypass Blocks

2.2. Landmark structure and user orientation

Current state:

  • A <header> landmark is present and contains branding and global links.
  • A <main> element exists but does not include a heading that describes the main content.
  • The area containing the H1, H2, and several key links:
    • is not marked as <aside>, <nav>, or <main>,
    • is not exposed as a meaningful region in the accessibility tree.

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.

2.3. Task-oriented usability

The page serves one primary task: logging in.

Although the form controls are correctly labelled and required attributes are present, the page lacks:

  • a clear task-oriented title within the main content,
  • a semantic connection between the login form and the purpose of the page.

Impact:

This increases cognitive load and reduces clarity, particularly for:

  • screen reader users,
  • users with cognitive disabilities,
  • less experienced users.

3. Core structural principle

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.

4. Recommended page structure

4.1. Semantic role allocation

Element Recommended role
Organisation name Branding / header content
“Administrator Login” H1 – page purpose
Login form Main content
Help and support links Complementary content ()

4.2. Example of a corrected semantic structure

<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>
avatar hans2103
hans2103 - comment - 1 Mar 2026

After that I received a draft of the login page standard that was developed.

Standard: Backend Login Page

Accessibility and Usability Requirements

Version

1.0

Scope

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.


1. Core principle

The structure of the login page must clearly communicate its purpose and allow users to immediately identify:

  • where they are,
  • what task they can perform,
  • how to complete that task.

This must be achieved through correct use of headings, landmarks, and semantic relationships, independent of visual layout.


2. Page purpose and heading structure

2.1. Main heading (H1)

  • The page must contain exactly one H1 heading.
  • The H1 must describe the primary task of the page, e.g.:
    • “Administrator Login”
    • “Log in to the Management Panel”
  • The H1 must be located inside the <main> landmark.
  • Branding or organisation names must not be used as the H1 unless they explicitly include the login purpose.

2.2. Secondary headings

  • Additional headings (H2+) may be used to:
    • introduce the login form,
    • label complementary content (e.g. help, support).
  • Headings must not appear outside any landmark region.

3. Landmark structure

The page must use landmarks to expose its functional structure to assistive technologies.

Required landmarks:

  • <header role="banner">
    Contains branding and global links (optional).
  • <main>
    Contains the login page’s primary content:
    • page heading (H1),
    • login form.

Optional landmarks:

  • <aside>
    Contains complementary content such as:
    • help links,
    • documentation,
    • support resources.
  • <nav>
    Used within <header> or <aside> for grouped links.

Content must not be placed outside landmarks unless it is purely decorative.


4. Login form requirements

4.1. Semantic association

  • The login form must be programmatically associated with the page purpose.
  • The form must be located within <main>.
  • If a visible heading is not appropriate, an accessible name must be provided using:
    • a visible heading, or
    • a visually hidden heading referenced via aria-labelledby.

4.2. Form controls

  • All form fields must have associated <label> elements.
  • Input purposes must be declared using appropriate autocomplete values.
  • Required fields must be indicated programmatically.

5. Branding and organisational information

  • Organisation or product names:
    • may appear in the banner or footer,
    • may be visually prominent,
    • must not replace the functional page heading.
  • Branding elements must not interfere with the logical reading order or heading hierarchy.

6. Support and help content

  • Help, documentation, and support links:
    • must not be mixed with the main login task,
    • should be placed in an <aside> landmark,
    • must have a heading describing their purpose (e.g. “Help and support”).

7. Accessibility rationale

This standard ensures:

  • clear task identification for screen reader users,
  • effective navigation by headings and landmarks,
  • reduced cognitive load for all users,
  • compliance with:
    • WCAG 2.1 / 2.2 (1.3.1, 2.4.1, 2.4.6),
    • EN 301 549 requirements related to structure and orientation.

8. Non-conformance examples

The following patterns are non-conformant:

  • The main login heading placed outside <main>.
  • An H1 that contains only the organisation name.
  • Headings located outside any landmark.
  • Login forms without a clear, programmatic association to the page purpose.

9. Implementation note

This standard can be implemented without visual redesign.
All requirements concern semantic structure and accessibility metadata only.

avatar hans2103 hans2103 - change - 1 Mar 2026
Labels Added: PR-6.1-dev
Removed: PR-6.0-dev
avatar hans2103
hans2103 - comment - 1 Mar 2026

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.

avatar brianteeman
brianteeman - comment - 1 Mar 2026

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

avatar joomla-cms-bot joomla-cms-bot - change - 1 Mar 2026
Category Administration Templates (admin) Administration Language & Strings Templates (admin) Repository NPM Change
avatar hans2103 hans2103 - change - 1 Mar 2026
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
avatar hans2103 hans2103 - close - 1 Mar 2026
avatar hans2103 hans2103 - change - 1 Mar 2026
Status Closed New
Closed_Date 2026-03-01 15:29:48
Closed_By hans2103
avatar hans2103 hans2103 - change - 1 Mar 2026
Status New Pending
avatar hans2103 hans2103 - reopen - 1 Mar 2026
avatar hans2103
hans2103 - comment - 1 Mar 2026

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)
avatar drmenzelit drmenzelit - test_item - 2 Mar 2026 - Tested successfully
avatar drmenzelit
drmenzelit - comment - 2 Mar 2026

I have tested this item ✅ successfully on 52bf793


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.

avatar brianteeman brianteeman - test_item - 2 Mar 2026 - Tested successfully
avatar brianteeman
brianteeman - comment - 2 Mar 2026

I have tested this item ✅ successfully on 52bf793

Tested light and dark mode
Tested LTR and RTL


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.

avatar richard67 richard67 - change - 2 Mar 2026
The description was changed
Status Pending Ready to Commit
avatar richard67
richard67 - comment - 2 Mar 2026

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45988.

avatar richard67 richard67 - edited - 2 Mar 2026
avatar HLeithner
HLeithner - comment - 4 Mar 2026

thanks

avatar HLeithner HLeithner - change - 4 Mar 2026
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
avatar HLeithner HLeithner - close - 4 Mar 2026
avatar HLeithner HLeithner - merge - 4 Mar 2026

Add a Comment

Login with GitHub to post a comment