User tests: Successful: Unsuccessful:
Added landmark region wrapper and role="button" to the Back-to-Top link, and changed
the container-bottom-a wrapper from
Fixes #45679
Pull Request resolves #45679.
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.
#back-top..container-bottom-a.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.
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.
Please select:
| Status | New | ⇒ | Pending |
| Category | ⇒ | Front End Templates (site) |
Passing an automated test is not a sign of success
@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.
@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.
Changing to
<aside>is wrong. As explained here: #45679 (comment) the correct tag can be set in the module itself.