Pending

User tests: Successful: Unsuccessful:

avatar Rishu-Soni
Rishu-Soni
6 Mar 2026

Added landmark region wrapper and role="button" to the Back-to-Top link, and changed
the container-bottom-a wrapper from

to in the Cassiopeia template to
resolve Axe DevTools accessibility violations and improve screen-reader accessibility.

Fixes #45679

Pull Request resolves #45679.

  • I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Summary of Changes

Both changes are in [templates/cassiopeia/index.php], Nothing visual changed, just two small structural fixes.

Change 1 — Back-to-top button:
So basically, the back-to-top <a> tag was sitting completely outside all the landmark sections on the page (it was after the </footer> closing tag with nothing around it). This means screen-reader users who navigate using landmarks would just never find this button — it was kind of invisible to them. I wrapped it in a <div role="region"> and gave it the label from TPL_CASSIOPEIA_BACKTOTOP_LABEL which already exists in the anchor tag. I also added role="button" on the <a> itself because it behaves like a button, not a link,
and screen readers should say "button" not "link" when you click to it.

Change 2 — container-bottom-a section:
Same kind of problem — the wrapper around the bottom-a module position was just a plain <div>, which doesn't count as a landmark. So anything inside it was also "lost" for screen-reader users. I changed <div> to <aside> which is a proper HTML5 landmark by itself. The CSS classes are exactly the same, so nothing breaks visually.

Testing Instructions

  1. Set up Joomla locally with the Cassiopeia template.
  2. Go to Admin → Templates → Cassiopeia → Edit Style and turn on "Back to Top".
  3. Add any module to the "bottom-a" position.
  4. Open the site frontend in your browser.
  5. Open the Axe DevTools extension and run a full scan.
  6. Check that there's no more "region" error for #back-top.
  7. Check that there's no more "region" error for .container-bottom-a.
  8. Try keyboard tabbing — when you reach the back-to-top button, your screen reader
    should say "Back-to-top Link, region" and then "Back to Top, button".
  9. Hit Space or Enter — it should scroll to the top of the page.

Actual result BEFORE applying this Pull Request

When you run Axe DevTools on a Cassiopeia page, it gives two "region" errors saying
"Some page content is not contained by landmarks." One points to the #back-top
anchor and the other to .container-bottom-a. If someone is using a screen reader
and navigating by landmarks, they completely miss both of these sections because
they aren't wrapped in any landmark at all.

Expected result AFTER applying this Pull Request

image

Both Axe errors go away. The back-to-top button is now inside a named region
landmark so screen readers can find it. It also gets announced as a "button"
which makes more sense than "link". The bottom-a section becomes an <aside>
which is a real landmark, so its content is reachable too.
2 Axe violations fixed, nothing broken visually.

Link to documentations

Please select:

  • Documentation link for guide.joomla.org:
  • No documentation changes for guide.joomla.org needed
  • Pull Request link for manual.joomla.org:
  • No documentation changes for manual.joomla.org needed
avatar Rishu-Soni Rishu-Soni - open - 6 Mar 2026
avatar Rishu-Soni Rishu-Soni - change - 6 Mar 2026
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 6 Mar 2026
Category Front End Templates (site)
avatar drmenzelit
drmenzelit - comment - 6 Mar 2026

Changing to <aside> is wrong. As explained here: #45679 (comment) the correct tag can be set in the module itself.

avatar brianteeman
brianteeman - comment - 6 Mar 2026

Passing an automated test is not a sign of success

avatar richard67
richard67 - comment - 6 Mar 2026

@Rishu-Soni Have you checked if there is already a PR for the same issue? There is #47307 .

So now we have 2 concurrent PRs for the same issue, and it seems both are wrong.

avatar richard67
richard67 - comment - 7 Mar 2026

@Rishu-Soni Have you checked if there is already a PR for the same issue? There is #47307 .

So now we have 2 concurrent PRs for the same issue, and it seems both are wrong.

Hmm, it seems both PRs try to solve the issue partly for the 2 different parts. So they are not concurrent.

avatar richard67
richard67 - comment - 8 Mar 2026

And now he have a 3rd PR: #47332

Add a Comment

Login with GitHub to post a comment