How To Define Required Inputs With ARIA And HTML5

This post originally appeared on the Yahoo! Accessibility blog.

form with required fieldsrequired form

This form has clearly labeled required fields

It's important to let users know when a form input is required. Most developers do this via visual tricks; such as placing an asterisk near the input, using color, or other background images. While this helps the sighted viewers, we need to define the labels clearly for screen reader users.

The most direct method is to actually tell the user within the label the input is required. Wrapping the required text in a strong allows the CSS to modify the colors and screen readers will emphasize the text.

<label for="tc">I have read and approve terms and conditions <strong>(required)</strong></label>
<input type="checkbox" value="yes" name="tc" id="tc">

The * can be a silent reminder

Many web sites use an * to symbolize required fields as this looks simpler than repeating "required". Unfortunately, many screen readers will ignore special characters with their default verbosity settings.

Location of content is important

When a screen reader user is inside a form it is possible to tab back and forth from one input element to another. This makes the navigation easier. The fieldset and legend combination and label provide the user with the information associated to the input elements. This information is necessary to perform tasks without searching for misleading clues surrounding the input elements.

Placing the required notation outside the label or legend elements is very likely to be missed/skipped by the screen reader user.

Sample of a required input with the warning in a bad location

<label for="firstname">First name: </label>
<input id="firstname" name="firstname" value="" type="text"/> (required)

Indirect methods for showing required fields

More commonly, a required field is indicated with styles, such as adding a class to the input.

<label for="tc" class="required">I have read and approve terms and conditions</label>
<input type="checkbox" value="yes" name="tc" id="tc" class="required">

label.required {
background: url(required.png) no-repeat 0 0;

Unfortunately, these styles give no indication of the inputs required status to those using screen readers, have images disabled, and/or have CSS disabled.

Define required inputs via HTML5 and/or ARIA

HTML5 introduces new form functionality, including the ability to declare an input as required. The browser can trigger success and error responses without the need for JavaScript. Please note, while this currently is not supported by all browsers it will not cause problems in older browsers.

<label for="tc">I have read and approve terms and conditions </label>
<input type="checkbox" value="yes" name="tc" id="tc" required>

/*give required inputs a yellow border */
textarea:required {
border:2px solid yellow;


/* turn the border green when it becomes valid */
textarea:valid {
border:1px solid green;


/*turn the border red if not valid */
textarea:focus:invalid {
border:1px solid red;


To make this more bulletproof we can add the aria-required attribute. This will let screen readers expect the input is required, even when the required attribute is not recognized.

<label for="tc">I have read and approve terms and conditions </label>
<input type="checkbox" value="yes" name="tc" id="tc" required aria-required="true">

The following CSS would give inputs with aria-required="true" a cream background. this could be changed to a different color when it becomes valid.

input[aria-required="true"] {

The aria-required attribute can be used without the HTML5 required attribute.

Combining ARIA with visual presentation

Our required inputs are now telling screen readers the input is required. How can we make this just as visually interesting? The following code snippet includes an icon with alt="required". If ARIA is supported, the screen reader will announce the aria-required attribute on the input, so we'll place role="presentation" on the image. This gives the visual design a nice graphical representation as well as ARIA and an alt text backup.

Sample form input

Code for input

<label for="fname">
First Name <img src="" alt="required" role="presentation" />
<input type="text" aria-required="true" required id="fname" name="fname" >

What you can do

It's easy to add the aria-required attribute to your required form inputs. It won't break existing behaviors and will let users know the input is required for the form to be processed correctly. It's also easy enough to add the HTML5 required attribute, however this will only be recognized by a few browsers.

HTML5 Native Alert Message Accessibility

John Foliot's article Accessible HTML5 Forms – Required Inputs further investigates the HTML5/ARIA required input markup. He focuses on how the browsers react to an invalid response.

The conclusion is to continue using both HTML5 required attribute and the aria-required attribute for the most complete support.

While we still don’t have a completely universal experience across all browsers, by doubling up the attributes we are ensured that the form input is as accessible as we can make it, while still taking advantage of the visual output that the ‘required’ attribute is starting to render. At this time then, the Best Practice is to still include both the aria-required and required attributes to your required form inputs.
Accessible HTML5 Forms – Required Inputs - John Foliot

Related Information