Contrib.social

Sidebar navigation headings are not in a logical order (H2, H3, H3, H3)

Open on Drupal.org →
Created on 20 October 2023, about 1 year ago
Updated 24 October 2023, about 1 year ago

Problem/Motivation

  • The sidebar currently contains several <h2> elements
  • The visually-hidden “Administrative toolbar” heading should be the only <h2> heading, and all others should cascade below that starting with <h3>

WCAG success criteria

1.3.1 Information and Relationships
2.4.6 Headings and Labels

Steps to reproduce

  1. Open the navigation in mobile or desktop view
  2. Inspect the page in your browser
  3. Search for “
  4. Verify that the <aside> only contains <h2> headings

Code snippet

<aside class="admin-toolbar" id="admin-toolbar" data-once="navigation">
  …
  <div class="admin-toolbar__scroll-wrapper">
    <h2 id="admin-toolbar" class="visually-hidden">Administrative toolbar</h2>
      <nav id="menu-builder" class="admin-toolbar__content" aria-labelledby="admin-toolbar">
        ...

        <div class="admin-toolbar__item toolbar-block menu--shortcuts">
          <h2 id="menu-top-menus" class="toolbar-block__title visually-hidden">Top Menus</h2>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h2 id="menu--admin" class="toolbar-block__title visually-hidden focusable">Administration</h2>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h2 id="menu--content" class="toolbar-block__title visually-hidden focusable">Content</h2>
          ...
        </div>
      </nav>
    </div>
  </div>
</aside>

Potential resolution

Excluding the parent “Administrative toolbar” H2 heading, change all submenu H2 headings to H3 headings:

<aside class="admin-toolbar" id="admin-toolbar" data-once="navigation">
  …
  <div class="admin-toolbar__scroll-wrapper">
    <h2 id="admin-toolbar" class="visually-hidden">Administrative toolbar</h2>
      <nav id="menu-builder" class="admin-toolbar__content" aria-labelledby="admin-toolbar">
        ...

        <div class="admin-toolbar__item toolbar-block menu--shortcuts">
          <h3 id="menu-top-menus" class="toolbar-block__title visually-hidden">Top Menus</h3>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h3 id="menu--admin" class="toolbar-block__title visually-hidden focusable">Administration</h3>
          ...
        </div>

        <div class="admin-toolbar__item toolbar-block">
          <h3 id="menu--content" class="toolbar-block__title visually-hidden focusable">Content</h3>
          ...
        </div>
      </nav>
    </div>
  </div>
</aside>
🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇸Spain ckrina Barcelona

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024