Contrib.social

aria-required attribute is redundant when required attribute is present

Open on Drupal.org →
Created on 26 November 2019, over 5 years ago
Updated 20 January 2023, over 2 years ago

Problem/Motivation

Required fields in Form API have both the required="required" attribute as well as the aria-required="true" attribute.

  • This is flagged in Siteimprove as a WCAG Level A warning, with the following generic text:

    A WAI-ARIA attribute that has the exact same features as the HTML element it has been applied to has been used. The WAI-ARIA attribute is redundant since is doesn't provide the user with any additional information.

    For landmarks it has previously been a recommendation to use HTML5 and WAI-ARIA landmark roles together (e.g. WAI-ARIA role="navigation" on HTML5 'nav' elements) to maximize support, but with the widespread adoption of HTML5 this is no longer needed.

    Where to find it in WCAG 2:
    4 Robust > 4.1 Compatible > A > 4.1.2 Name, Role, Value > Warning > Redundant WAI-ARIA attribute

  • According to On HTML belts and ARIA braces (The Default Implicit ARIA semantics they didn’t want you to know about) by Steve Faulkner — one of the editors of the ARIA spec — adding the 'aria-required' in addition to the native HTML 'required' attribute is a, quote, “waste of time” since it is already set by the browser, as can be seen in https://stevefaulkner.github.io/html-mapping-tests .

Steps to reproduce

Inspect a node edit screen and look at any required field, such as node title.

Proposed resolution

Siteimprove suggests the following fix:

The WAI-ARIA attribute can be removed without any impact for end users. The result will be cleaner, easier to maintain code.

The suggested changes would affect Drupal Core in these places:

  1. setAttributes method of core/lib/Drupal/Core/Render/Element/RenderElement.php:
        // This function is invoked from form element theme functions, but the
    // rendered form element may not necessarily have been processed by
    // \Drupal::formBuilder()->doBuildForm().
    if (!empty($element['#required'])) {
      $element['#attributes']['class'][] = 'required';
      $element['#attributes']['required'] = 'required';
      $element['#attributes']['aria-required'] = 'true';  #<-- HERE
    }
  2. $document.on('state:required' of core/misc/states.es6.js.
          if (e.value) {
        const label = `label${e.target.id ? `[for=${e.target.id}]` : ''}`;
        const $label = $(e.target)
          .attr({ required: 'required', 'aria-required': 'true' }) /*<-- HERE */
          .closest('.js-form-item, .js-form-wrapper')
          .find(label);
        // Avoids duplicate required markers on initialization.
        if (!$label.hasClass('js-form-required').length) {
          $label.addClass('js-form-required form-required');
        }
      } else {
        $(e.target)
          .removeAttr('required aria-required') /*<-- HERE */
          .closest('.js-form-item, .js-form-wrapper')
          .find('label.js-form-required')
          .removeClass('js-form-required form-required');
      }

The addition of aria-required in addition to the required attribute was done over 10 years ago in #1174938: Natively support the HTML5 required and aria-required FAPI properties → .

Remaining tasks

  1. Validate that this is an actual bug or a red herring from Siteimprove.
  2. If bug, write a patch with tests.
  3. If red herring, write to Siteimprove to fix their tests.

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Needs review

Version

10.1 ✨

Component
Form  →

Last updated about 5 hours ago

Created by

🇫🇮Finland thatguy

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.

  • html5

    Implements and supports the use of HTML5.

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.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024