"Skip to main content" link skips over content that is essential to the page, banner role should be for global content

Created on 28 March 2023, over 1 year ago
Updated 7 June 2024, 5 months ago

Problem/Motivation

On admin pages, the header element containing the breadcrumb nav, h1, and (occasionally) primary tabs is located outside of the main landmark. This causes a few accessibility issues:

  1. Because it's a header element not contained in another landmark, it's interpreted as a "banner" by screen readers. A "banner" landmark should be only used for repetitive, site-oriented content – not content that's specific to the page. (reference: https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/banner.html)
  2. Because the "Skip to main content" link moves focus to the main element, it skips over this header even though it's essential to the page (not global content).

Steps to reproduce

Using a screen reader, hit enter on the "Skip to main content" link on a logged-in page -- for example, the page for editing your profile. Notice how the screen reader focus skips over the h1 with your username, "View"/"Shortcuts"/"Edit" links, and breadcrumb nav.

Proposed resolution

  1. Change <main class="page-content ..."> to a <div class="page-content ...">
  2. Put a <main> around the <header class="content-header clearfix"> and the <div class="layout-container"></div> that contains the page content.
  3. Move <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div> to be the first child of the new <main>.

User interface changes

"Skip to main content" link jumps to page-specific header.

🐛 Bug report
Status

Fixed

Version

10.3

Component
Theme 

Last updated about 14 hours ago

Created by

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024