Cannon Access

28 May 2010

Use ARIA to Indicate When Form Fields Are Required

The next time you create an HTML form with required fields, consider adding the aria-required=”true” attribute to the required control.

<input type=... aria-required="true" .../>

From the ARIA draft:

Indicates that user input is required on the element before a form may be submitted. For example, if a user needs to fill in an address field, the author will need to set the field’s aria-required attribute to true. Note: The fact that the element is required is often presented visually (such as a sign or symbol after the widget). Using the aria-required attribute allows the author to explicitly convey to assistive technologies that an element is required. Unless an exactly equivalent native attribute is available, host languages SHOULD allow authors to use the aria-required attribute on host language form elements that require input or selection by the user.

This property is supported in just about all screen reader/ browser combinations that support ARIA. However, for backward compatibility, you should still include some sort of notice in the controls label. An asterisk seems to be the most common, and most users know what it means.

When a modern screen reader encounters a control with the aria-required property set to true, it will simply say “required” in addition to announcing the control type. For example, jaws will say “required edit” when it encounters a required text entry field.

As with every accessibility feature, be careful not to over use this. A good rule of thumb is if you visually indicate that a field is required, indicate the same with ARIA. Likewise, if you don’t visually indicate that a field is required, then don’t do so with ARIA either.