HTML Guide for aria-required

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 value of the maxlength attribute contains invalid characters because it is incorrectly combined with another attribute.

In HTML, the maxlength attribute for an input element should contain only a non-negative integer value, which specifies the maximum number of characters allowed in the input. The aria-required attribute must be a separate attribute in the tag.

Correct usage separates each attribute and assigns the appropriate value using quotation marks for each. For example, maxlength="200" and aria-required="true" must be distinct and not combined.

Incorrect:

<input type="text" name="nome" id="nome" maxlength="200 aria-required="true">

Correct:

<input type="text" name="nome" id="nome" maxlength="200" aria-required="true">

This valid example uses maxlength="200" for character limit and adds aria-required="true" to improve accessibility for assistive technologies.

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">

Using aria-required on a div element requires more context about that element, by providing one of the attributes aria-expanded, aria-valuemax, aria-valuemin, aria-valuenow, role.

When possible, you should prefer semantic tags like input, select and textarea, and use the required attribute, but when form controls are created using non-semantic elements, such as a div element, 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. In that case, other attributes might be needed to make the element valid.

For example, we could build a radiogroup using a div like this:

<div aria-required="true">
  <div data-value="One"></div> 1
  <div data-value="Two"></div> 2
  <div data-value="Three"></div> 3
</div>

This HTML snippet would then be decorated using CSS and added functionality using JavaScript. However, the W3C validator will complain that the element div is missing one of the attributes aria-expanded, aria-valuemax, aria-valuemin, aria-valuenow, role.

We can fix that by adding the appropiate role to that div element, like this:

<div aria-required="true" role="radiogroup">
  <div data-value="One"></div> 1
  <div data-value="Two"></div> 2
  <div data-value="Three"></div> 3
</div>

Here is an example showing how to add the “role” attribute to the “div” element:

<div role="region">
<!-- Your content goes here -->

</div>

In this example, the role attribute is added with the value radiogroup. You can choose the appropriate ARIA role based on the purpose or role of your div element.

Remember to also provide the necessary values for the specified attributes if you are adding aria-valuemax, aria-valuemin, or aria-valuenow to ensure proper accessibility and usability of your content.