Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Redundant aria-required on required fields #1822

Open
solipet opened this issue Oct 30, 2023 · 1 comment · May be fixed by #1823
Open

Redundant aria-required on required fields #1822

solipet opened this issue Oct 30, 2023 · 1 comment · May be fixed by #1823

Comments

@solipet
Copy link

solipet commented Oct 30, 2023

Environment

  • Ruby 3.2.2
  • Rails 7.0.0
  • Simple Form 5.3.0

Current behavior

This form:

<%= simple_form_for(@user, url: simple_form_test_url) do |f| %>
    <%= f.input :uuid, required: true %>
<% end %>

produces this output:

<input class="required" required="required" aria-required="true" type="text" value="333...678" name="user[uuid]" id="user_uuid">

Having both required="required" and aria-required="true" is redundant and not recommended per the Mozilla docs.

Expected behavior

Ideally, the generated field would look like this:

<input class="required" required="required" type="text" value="333...678" name="user[uuid]" id="user_uuid">

We see that this behavior was added intentionally in #781 (2013), but is no longer recommended.
@aduth
Copy link

aduth commented Oct 31, 2023

Some more data points:

The ARIA spec discourages the use of redundant ARIA attributes:

It is NOT RECOMMENDED for authors to set the ARIA role and aria-* attributes to values that match the implicit ARIA semantics defined in either table.

Source: https://w3c.github.io/html-aria/#rules-wd

aria-required is the implicit semantics associated with the required attribute:

Any element where the required attribute is allowed: input required, textarea required, and select required [...] aria-required="true"

Authors SHOULD NOT use the aria-required="true" on any element which also has a required attribute.

Source: https://w3c.github.io/html-aria/#docconformance-attr

Real-world support for required in screen readers is largely equivalent between required and aria-required:

Excluding Android browsers paired with TalkBack, all other tested screen reader and browser pairings announce a form control as “required” when using the required attribute. [...] (Unfortunately, even using aria-required="true" on a form control did not help TalkBack announce it as “required.”)

Source: https://www.tpgi.com/required-attribute-requirements/

Additional source for support in conveying the property:

Blog posts from around 2012 seem to indicate that it was previously recommended due to lack of consistent support at the time, which (along with the mention of IE9 in #781) could explain why the doubling-up was reasonable at the time.

@aduth aduth linked a pull request Oct 31, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove aria-required for required fields in HTML5 aduth/simple_form
2 participants
@aduth @solipet