Medium-confidence a11y fixes: landmark labels and pager headings - #5640
Medium-confidence a11y fixes: landmark labels and pager headings#5640accesswatch wants to merge 5 commits into
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility semantics in the az_barrio theme by making navigation landmark labels more distinct and aligning pager headings with section-level heading structure.
Changes:
- Adds context-aware
aria-labelvalues to menu block<nav>elements. - Updates full and mini pager landmarks to use
aria-labelledby. - Promotes pager hidden headings from
h3toh2.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
themes/custom/az_barrio/templates/blocks/block--system-menu-block.html.twig |
Builds a contextual navigation label for system menu landmarks. |
themes/custom/az_barrio/templates/blocks/block--az-barrio-sidebar-menu.html.twig |
Adds sidebar/mobile context to sidebar menu landmark labels. |
themes/custom/az_barrio/templates/navigation/pager.html.twig |
Uses the hidden pagination heading as the nav label and updates heading level. |
themes/custom/az_barrio/templates/views/views-mini-pager.html.twig |
Applies the same pager landmark and heading semantics to mini pagers. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
| <nav role="navigation" aria-label="{{ heading_id }}"> | ||
| <h3 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h3> | ||
| <nav role="navigation" aria-labelledby="{{ heading_id }}"> | ||
| <h2 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h2> |
There was a problem hiding this comment.
@accesswatch could you explain the reason for the change in heading level?
There was a problem hiding this comment.
Sure - two related problems. As an h3, the hidden Pagination heading implied a subsection of an h2 that doesn't exist on most pages that render pagers (search results and listing pages typically have the h1 page title and then h2 content sections), so it produced a skipped heading level that axe flags as heading-order and that makes the heading outline confusing when navigating by headings with a screen reader. Promoting it to h2 puts Pagination at the same outline level as the content sections it follows. The companion change from aria-label to aria-labelledby fixes the landmark name itself: aria-label="{{ heading_id }}" was announcing the raw machine ID as the navigation landmark's name, while aria-labelledby points at the heading so the landmark is announced with the translated 'Pagination' text.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Tugboat has finished building the preview for this pull request! Link: Dashboard: |
Summary
Changes
themes/custom/az_barrio/templates/blocks/block--system-menu-block.html.twigaria-label(e.g., mobile context) on<nav>.themes/custom/az_barrio/templates/blocks/block--az-barrio-sidebar-menu.html.twigaria-label(sidebar/mobile context) on<nav>.themes/custom/az_barrio/templates/navigation/pager.html.twigaria-labelledby+ upgrades hidden heading fromh3toh2.themes/custom/az_barrio/templates/views/views-mini-pager.html.twigaria-labelledby+ upgrades hidden heading fromh3toh2.Impact
landmark-unique,heading-order