The new HTML5 pattern attribute can also be used to improve field completion. If your field accepts regular expression-validatable data, you can add this attribute to automatically check the input. When using this attribute, the HTML5 specification recommends the restriction be added to the title attribute.

We could reformulate our previous example now as follows:

<input type="text"
          id="uname"
          name="username"
          aria-labelledby="username-label"
          pattern="[A-Za-z0-9]{8,16}"
          title="Enter a user name between 8 and 16 characters in length
and containing only alphanumeric characters" />

Another common nuisance in web forms of old has been the use of asterisks and similar text markers and visual cues to indicate when a field was required, as there was no native way to indicate the requirement to complete. These markers were not always identifiable by persons using assistive technologies. HTML5 now includes the required attribute to cover this need, however. ARIA also includes a required attribute of its own. Similar to labeling, it’s a good practice at this time to add both to ensure maximum compatibility:

<input type="text"
          id="uname"
          name="username"
          aria-labelledby="username-label"
          pattern="[A-Za-z0-9]{8,16}"
          title="Enter a user name between 8 and 16 characters in length
and containing only alphanumeric characters"
          required="required"
          aria-required="true" />

An accessible reading system could now announce to the reader that the field is required when the reader enters it. Adding a clear prose indication that the field is required to the label is still good practice, too, as colors and symbols are never a reliable or accessible means of conveying information:

<label for="uname">User name: (required)</label>

ARIA also includes a property for setting the validity of an entry field. If the reader enters invalid data, you can set the aria-invalid property in your code so that the reading system can easily identify and move the reader to the incorrect field. For example, your scripted validation might include the following line to set this state when the input doesn’t pass your tests:

document.getElementById('address').setAttribute('aria-invalid', true);

Note, however, that you must not set this state by default; no data entered does not indicate either validity or invalidity.

In addition to labeling individual form fields, you should also group and identify any regions within your form (a common example on the web is forms with separate fields for billing and shipping information). The traditional HTML fieldset element and its child legend element cover this need without special attributes.

So, to try and sum up, the best advice with forms is to strive to make them as accessible as you can natively (good markup and logical order), but not to forget that WAI-ARIA exists and has a number of useful properties and states that can enhance your forms to make them more accessible.