HTML Checking for Large Sites

The aria-required attribute is used to indicate to screen reader users that a form input is required. As there is now in HTML a general required attribute which works with most user agents, it’s unnecessary to use both at the same time. In general, you can rely solely on the required attribute, unless you want to provide backwards compatibility on old screen reader software versions.

Example:

<form action="order.">
  <!-- This will raise a warning on unnecesary attributes -->
  <input id="city" name="city" aria-required="true" required />

  <!-- You can use this instead -->
  <input id="city" name="city" required />
</form>

The only accepted value for the aria-required property is true.

The aria-required attribute indicates that user input is required on the element before a form may be submitted.

When a semantic HTML <input>, <select>, or <textarea> must have a value, it should have the required attribute applied to it. 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.

Example:

<div id="email_label">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="email_label"
  aria-required="true"
  id="email"></div>

The boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

If this property is not present, the input will be considered as optional. To mark an input as required, it’s enough to include the property without any value, or pass it the required value as in these examples:

Example:

<input type="text" required>
<input type="text" required="required">