heartcombo / simple_form

Forms made easy for Rails! It's tied to a simple DSL, with no opinion on markup.
http://blog.plataformatec.com.br/tag/simple_form
MIT License
8.21k stars 1.31k forks source link

Redundant aria-required on required fields #1822

Closed solipet closed 2 months ago

solipet commented 10 months ago

Environment

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 commented 10 months ago

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 requiredtextarea 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.