Technique: marking form fields as required using aria-required

From CodeTalks

This technique is originally from Marco Zehe's easy ARIA tips blog series.

This is the start of a mini series about easy accessibility improvements you can accomplish using ARIA, but which do not require you to implement a whole widget. Some ARIA attributes also work on plain old standard HTML elements and can easily improve accessibility within supported browsers and screen readers. On browsers that do not support these attributes (yet), they are ignored and do not break your page just because that attribute is there.

The first attribute I’d like to cover is called aria-required. It is one of the ARIA global properties, which means, as stated, that it can be used on any conventional HTML element such as input or select.

Let’s look at this sample excerpt (or try it out):

HTML Code:

  <form action="post">
    <label for="firstName">First name:</label>
    <input id="firstName" type="text" aria-required="true" />
    <br/>
    <label for="lastName">Last name:</label>
    <input id="lastName" type="text" aria-required="true" />
    <br/>
    <label for="streetAddress">Street address:</label>
    <input id="streetAddress" type="text" />
  </form>

In this excerpt, both the firstName and lastName input elements have the aria-required attribute set. Note that in normal scenarios, you’d also stype them or their label differently, or put an asterisk “*” after the label. However, if you cannot or do not want to put an asterisk on the label, but only style it with bold text or the like, screen readers usually cannot pick up the information automatically that this is a required field. If you use the aria-required attribute as shown above, modern screen readers will indicate that this is a required field automatically, if used together with Firefox 3. Screen readers that already support this feature are NVDA, JAWS 9.0, and Window-Eyes 5.5 or higher. JAWS 8 does not support this attribute. Also, Orca does not seem to pick this attribute up yet, at least my testing showed that Orca did not indicate the required state to me when tabbing through that form.

This demonstrates how easily you can use ARIA without implementing a whole widget to improve accessibility on your web sites.

The next step is to improve the usability of form by validating input on the client side as well, so that users don't have to submit the form and find where their error is after a page reload, just to correct a simple error. See Technique: improving forms for all via aria-invalid and role="alert".