Contrib.social

Incorrect ARIA markup for dismissible messages

Open on Drupal.org →
Created on 10 January 2023, over 1 year ago
Updated 21 June 2024, 3 months ago

Problem/Motivation

The Radix theme markup for dismissible Drupal messages (errors, alerts, etc) generates inaccessible code. The Close button is natively focusable, but it is marked as aria-hidden="true". This will make it unusable for users of assistive technology such as screenreaders.

The Bootstrap accessibility JS includes a function to clean this up, but not all sites will be using that plugin.

Steps to reproduce

  1. Install a Drupal 7 site with a Radix-based theme that doesn't use the Bootstrap accessibility JS.
  2. Take an action that results in a Drupal status message being output to the browser - for example, create and save a node.
  3. View the source code of the resulting page.
  4. Note the markup of the status message:
<div id="messages">
  <div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    Page <em class="placeholder">Test content page</em> has been created.
  </div>
</div>

Proposed resolution

There are several possible ways to mark this up:
Use an aria-label on the button and remove the aria-hidden attribute:

<div id="messages">
  <div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">&times;</button>
    Page <em class="placeholder">Test content page</em> has been created.
  </div>
</div>

Do the same thing that the Bootstrap JS does, and add screenreader-only text:

<div id="messages">
  <div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    Page <em class="placeholder">Test content page</em> has been created.
  </div>
</div>

The aria-label approach has one possible drawback, which is that element attributes are not usually translated by things like Google Translate.

Remaining tasks

  • Decide on best approach.
  • Patch and test.

User interface changes

None.

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Closed: outdated

Version

3.0

Component

Code

Created by

🇺🇸United States cboyden

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

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