Contrib.social

Add accessible names to theme region complementary landmarks

Open on Drupal.org →
Created on 9 January 2020, almost 5 years ago
Updated 6 June 2023, over 1 year ago

Problem/Motivation

Drupal's page template has several regions with the landmark role: <aside role="complementary">.

The WAI-ARIA Authoring Practices recommends giving these accessible names. Currently, ours do not.


Accessible Name Guidance by Role

  • Naming is necessary when two complementary landmark regions are present on the same page.
  • Naming is recommended even when one complementary region is present to help users understand the purpose of the region's content when navigating among landmark regions.
  • Use aria-labelledby if a visible label is present, otherwise use aria-label.

Proposed resolution

Add accessible names to the theme regions. For example: <aside role="complementary" aria-label="First sidebar">

Problem:

What names will we use for the complementary landmarks?

The names of the theme regions are almost a good fit, but not exactly. Some tweaks are needed:

  1. Bartik has several regions called "Featured bottom first", etc, but these are all wrapped up in a single landmark region. So we can call that one "Featured Bottom".
  2. The "First sidebar" and "Second sidebar" names are potentially confusing:
    • If there's only one sidebar, and it's called "first sidebar", that sets up the expectation that there is another one.
    • Even worse, if there's only one sidebar, but it's called "second sidebar", then that would be even more confusing.

    To address this, we can make the name conditional:

    • If there is only one sidebar, call it "sidebar".
    • If both sidebars are present, use the names "first sidebar" and "second sidebar".

    There is already some code in which adds CSS classes based on the number of sidebars, so a similar approach could be used to create conditional aria-label attributes for the sidebars.

Remaining tasks

  • Figure out the names to use. DONE, see comments #7-8.
  • Patch the page templates. See the file list in comment #5.

User interface changes

No visible changes. Addition of accessible names for assistive technology.

API changes

None expected.

Data model changes

None expected.

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Markup  →

Last updated about 2 months ago

No maintainer
Created by

🇬🇧United Kingdom andrewmacpherson

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.

  • Novice

    It would make a good project for someone who is new to the Drupal contribution process. It's preferred over Newbie.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • Needs frontend framework manager review

    Used to alert the fron-tend framework manager core committer(s) that a front-end focused issue significantly impacts (or has the potential to impact) multiple subsystems or represents a significant change or addition in architecture or public APIs, and their signoff is needed (see the governance policy for more information). If an issue significantly impacts only one subsystem, use Needs subsystem maintainer review instead, and make sure the issue component is set to the correct subsystem.

  • Needs change record

    A change record needs to be drafted before an issue is committed. Note: Change records used to be called change notifications.

Sign in to follow issues

Comments & Activities

Not all content is available!

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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024