No Code Attached Yet a11y a11y-audit-backlog a11y-priority-serious (High) a11y-ms1b-quickwins
avatar mbeganyi-a11y
mbeganyi-a11y
4 Sep 2026

Steps to reproduce the issue

Milestone 1a finding ID M1a-009
Backlog priority High
Severity — carried from Milestone 1a Moderate
Implementation effort Medium
Target milestone(s) MS2b — Core Forms and Validation; MS3b — Backend Template Build
WCAG 2.2 success criterion 1.3.1 Info and Relationships; 4.1.2 Name, Role, Value
Responsibility tag(s) from report Development
Affected Joomla area/component Atum — main menu toggle button — Milestone 1a finding #9
Affected user journey(s) 01 — Backend Template (Atum)

Atum sidebar shown in expanded and collapsed states with the Toggle Menu control

Audit finding

The Toggle Menu control is implemented as a link with href="#".

It does not convey whether the main menu is expanded or collapsed to assistive technology.

The report recommends replacing the link with a <button> element. It suggests using aria-pressed to expose the toggle state, or alternatively changing the visible button text between states.

The report also notes that an aria-label should generally not override visible text when that text can serve as the accessible name.

User impact

Screen-reader users hear a link named “Toggle Menu” but cannot determine whether the menu is currently expanded or collapsed.

Because the control is a link, it may not support the expected Space activation behaviour for a button. Users relying on keyboard interaction may find its behaviour unexpected.

Without state information, users may activate the control more than once or be uncertain whether their action changed the sidebar.

Remediation plan

Use button semantics and expose the sidebar state

  • Replace the href="#" link with a <button> element
  • Ensure the button activates with both Enter and Space
  • Expose whether the sidebar is expanded or collapsed
  • Consider aria-pressed on the button, or changing its visible text between “Collapse Menu” and “Show Menu”
  • Use the visible text as the accessible name where possible; avoid an overriding aria-label unless needed
  • Ensure the visible icon does not replace or conflict with the accessible name
  • Preserve a visible focus indicator
  • Ensure the state remains accurate after page load, interaction, and any persisted sidebar preference
  • Ensure the state is announced or otherwise perceivable after activation
  • Apply the corrected pattern to the shared Atum sidebar component
  • Do not rely on the icon alone to convey the state

Preconditions

  • Use Joomla 6.2 with the Atum administrator template
  • Sign in with an account permitted to view the administrator dashboard
  • 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
  • Record the sidebar's initial state before interacting with the control

Steps to reproduce

  1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
  2. Locate the Toggle Menu control in the sidebar
  3. Inspect the control using Developer Tools
  4. Record its element type, href, accessible name, and any ARIA state attributes
  5. Record whether the sidebar is expanded or collapsed
  6. Move keyboard focus to the control
  7. Attempt to activate it with Space
  8. Record whether the sidebar state changes
  9. Activate it with Enter
  10. Record whether the sidebar state changes
  11. Inspect the control again and record whether any state attribute or visible text changes
  12. Capture the expanded and collapsed states, the control's DOM, and the keyboard results
  13. Reload the page and record whether the initial state is preserved and conveyed

Screen-reader verification

  1. Use a screen reader with the browser combination being tested
  2. Navigate to the menu toggle control
  3. Record its announced role, name, and state
  4. Activate the control with the keyboard
  5. Record whether the state change is announced
  6. Activate it again and record the resulting announcement
  7. Repeat with at least one additional screen reader if available
  8. Record the screen-reader name, version, browser, and operating system

Verification after remediation

  1. Open the Atum dashboard
  2. Confirm that the menu toggle is a <button>
  3. Confirm that its expanded or collapsed state is programmatically exposed
  4. Confirm that it activates with both Enter and Space
  5. Confirm that the state change is announced or otherwise perceivable
  6. Confirm that the visible name accurately describes the action in each state
  7. Confirm that focus remains visible and predictable
  8. Record the final element type, accessible name, state, and keyboard behaviour

Version

6.2

Expected result

The main-menu toggle is a button and conveys whether the sidebar is expanded or collapsed to assistive technology.

It can be activated with both Enter and Space, and its state change is perceivable after activation.

Actual result

The Toggle Menu control is implemented as a link with href="#".

It does not convey the current expanded or collapsed state to assistive technology.

The current Joomla 6.2 build needs to be checked to establish whether the issue persists.

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 presents both aria-pressed and changing visible button text as possible approaches. Choose and verify one consistent approach.

The report advises against using aria-label to override visible text unnecessarily. Use the visible text or aria-labelledby where possible.

This issue concerns the sidebar toggle's semantics and state. It is distinct from #48398, which concerns how the current menu item is indicated.

MS2b is proposed for the shared sidebar-toggle component, with MS3b covering the documented Atum integration.

avatar mbeganyi-a11y mbeganyi-a11y - open - 4 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 4 Sep 2026
Labels Added: a11y
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 4 Sep 2026
avatar joomla-cms-bot joomla-cms-bot - change - 4 Sep 2026
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 4 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 7 Sep 2026
Labels Added: a11y-priority-serious (High)
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 7 Sep 2026
avatar rdeutz rdeutz - change - 7 Sep 2026
Labels Added: a11y-audit-backlog
avatar rdeutz rdeutz - labeled - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 7 Sep 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 7 Sep 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 7 Sep 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 8 Sep 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 8 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 8 Sep 2026
Title
…
Menu toggle button does not convey state, uses wrong role
Atum: Main menu toggle button does not convey state, uses wrong role
avatar mbeganyi-a11y mbeganyi-a11y - edited - 8 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 21 Sep 2026
Labels Added: a11y-ms1b-quickwins
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 21 Sep 2026
avatar brianteeman
brianteeman - comment - 24 Oct 2026

see #48696

avatar mbeganyi-a11y mbeganyi-a11y - change - 26 Oct 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 26 Oct 2026

Add a Comment

Login with GitHub to post a comment