Problem/Motivation

ARIA 1.1 specifies that the aria-required attribute isn't allowed on an element with role="radio"--including an input with a radio type. aria-required is allowed on a radiogroup role (which would be <fieldset> in this case), but not on the inputs themselves. This was confirmed by Wilco Fiers that aria-required wasn't intended to be allowed on the radio role.

This markup causes some accessibility checks to fail pages with webforms containing required radio elements.

Steps to reproduce

  1. Install local Drupal 9 and latest version of Webform (6.0.3 as of ticket's creation date)
  2. Create a new webform, or use default Contact form
  3. Add a radio element (use any custom value setting for inputs, I chose gender option for radio)
  4. Rendered markup shows inputs with type of radio have aria-required="true"

Proposed resolutions

  1. Preferred: Remove the aria-required attribute from the rendered tag, using only the required attribute instead.
  2. Backup solution: If the idea is to convey the grouping of radio inputs is required (not the individual inputs), the fieldset may allow an aria-required="true" value, so the required state could be applied to the grouping instead of the inputs themselves. Support at the time seemed spotty, but in a quick Codepen test announced as expected in VoiceOver/Safari on macOS Catalina. Needs more testing to confirm this works in other combos.

User interface changes

Shouldn't be any user interface changes.

Comments

CarlyGerard created an issue. See original summary.

jrockowitz’s picture

Version: 6.x-dev » 8.x-5.x-dev
Status: Active » Needs review
StatusFileSize
new769 bytes

Please review the attached patch. This issue should be addressed in 8.x-5.x.

What about checkboxes? Should they have an aria-required attribute?

paulocs’s picture

StatusFileSize
new74.55 KB

No. Checkbox does not support aria-required.
See the Required States and Properties:

Checkbox

paulocs’s picture

Words from Wilco Fiers:

This is the correct implementation of ARIA 1.1. In ARIA, checkboxes and radiobuttons can not be required. Elements with the role of radiogroup can be required, but not the radiobuttons themselves. As for checkboxes, in a way these element always provide a value (checked or unchecked). I'm guessing that when you mean to make such an element 'required' you intend for it to be checked. This is a common enough use case. The aria-required attribute does not permit a 'null' result. But a checkbox never gives null, it only gives a true or false value.

jrockowitz’s picture

StatusFileSize
new870 bytes

@paulocs Thank you for doing that research.

paulocs’s picture

Status: Needs review » Needs work

I confirm that patch #5 removes the attribute aria-required for inputs type radio, but not for inputs type checkbox.

jrockowitz’s picture

The checkbox's aria-require attribute is coming from Drupal core.

@see \Drupal\Core\Render\Element\RenderElement::setAttributes

Still, for conditionally a required checkbox the patch is applicable.

paulocs’s picture

Status: Needs work » Reviewed & tested by the community

Makes sense! Also if the webform contains a checkboxes element, the aria-required is removed from the checkbox input.
Moving to RTBC.

  • jrockowitz authored e119f25 on 8.x-5.x
    Issue #3213292 by jrockowitz, paulocs: aria-required attribute on input[...
jrockowitz’s picture

Status: Reviewed & tested by the community » Fixed

  • jrockowitz authored e119f25 on 6.x
    Issue #3213292 by jrockowitz, paulocs: aria-required attribute on input[...
carlygerard’s picture

Thanks @jrockowitz and @paulocs!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.