<input aria-required> actually does nothing here.

It would need to be <input aria-required="true">

aria attributes are strings, not typical booleans.

The advice is also wrong. Screenreaders like VoiceOver are able to correctly read out that a form element is required just by providing the required attribute. I tested it just now. It reads it just fine.

From the MDN article on “aria-required”:

When a semantic HTML , , or must have a value, it should have the required attribute applied to it. The HTML required attribute disables submitting the form unless the required form controls have valid values, while ensuring those navigating with the aid of assistive technologies understand which semantic form controls need valid content.

When form controls are created using non-semantic elements, such as a

<

div> with a role of checkbox, the aria-required attribute should be included, with a value of true, to indicate to assistive technologies that user input is required on the element for the form to be submittable. The aria-required attribute can be used with HTML form elements; it is not limited to elements that have an ARIA role assigned.

Basically, aria-required="true" is intended for non-semantic elements. IE: <div role="checkbox" aria-required="true">

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required

Thanks for the feedback Kev. The post has been updated.

Thanks for the feedback Adrian. The form element does provide context to a screen reader that it is a form, that is why I am using it in the example. The focus styles are there because I covered them previously. I just wanted to show them in general. A div is a division within the page, divider may have been the wrong word.

required provides the validation piece, aria-required announces to assistive tech that it is required.

According to Required attribute requirements, the required attribute will announce a form element as “required” to screen reader users.

Also the MDN page linked in the article says that aria-required should be used “when form controls are created using non-semantic elements”. Otherwise the required attribute is preferred. (See also the examples on that page.)

Do you have any ressources/tests that support your claim that both can (or even should, as this article implies) be used in conjunction?

Yeah you shouldn’t, aria-required is only useful for non semantic markup. It’s completely superfluous on an input. The required attribute already provided the necessary information for assistive tech.

As for the 5 best practice assertions…

How is the <form> element more accessible by default? Does using it provide some specific benefit for screen readers?
Is for/id somehow better than wrapping the text in the <label>?
Readers should visit Required attribute requirements to better understand required and aria-required.
I don’t understand how these focus styles benefit screen reader users in particular (which is the scope of this article). We know not all screen reader users are blind, but are you suggesting those users have an additional benefit from these?
By definition, the <div> element is not a divider. You may be thinking of <hr>. As far as screen readers are concerned, and as conveyed via platform accessibility APIs, the <div> is a generic element.

There’s certainly no need to use both, as far as I know. Screen reader support is very good for native required.

If you google, there’s been lots of (conflicting) advice over the years.

I personally prefer to use required to provide native HTML5 validation, then progressively enhance with JS… turning off native validation with the novalidate attribute, and leveraging the Constraint Validation API to provide error feedback on form submit.

Example here – https://basher.github.io/Web-UI-Boilerplate/?path=/docs/web-components-or-custom-elements-webui-form-validate–docs

Using required is the way to go. I apologize for the confusion. The post has been updated.