Techniques/HTML5/Using the required attribute to indicate a required input field

Status

• New technique.

Applicability

This technique applies to HTML 5 form controls.

WCAG references

This technique relates to:

• Success Criterion 3.3.1 Error Identification (sufficient)
• Success Criterion 3.3.4 Error Prevention - legal, financial, data (sufficient)

User Agent and Assistive Technology Support Notes

Visual feedback

When a form containing a field with a required attribute is submitted, visual feedback indicating that an error occurred varies among user agents.

The following browsers display a hover tooltip error message indicating user input is required.

• Firefox 8 (a border is drawn around the required field)
• Chrome 15 (a border is drawn around the required field)
• Opera 11.52 (no border is drawn around required field)

The following user agents do not visually indicate that a required field must contain data when a form is submitted:

• Safari 5.1.2
• Internet Explorer 9

Form submission behavior

Form submission behavior of an empty required input field varies among user agents. The following user agents prevent a form submit when a required field is empty.

• Firefox 8
• Chrome 15
• Opera 11.52

However, the following user agents allow a form submit even if a required field is empty:

• Safari 5.1.2
• Internet Explorer 9

Screen reader support

Screen reader support for the required attribute varies among user agent/screen reader combinations.

Firefox 8, NVDA 2011.3 and JAWS 13 behave as follows:

• the required input field is identified as required
• an empty input field is identified as an invalid entry
• when a required field is empty and submitted, the screen reader alerts the user that the field must not be empty

VoiceOver in Safari 5.1.2 on Snow Leopard 10.6.8 behaves as follows:

• screen reader identifies input as required

Internet Explorer 9, NVDA 2011.3 and JAWS 13 behave as follows:

• screen reader does not identify input as required

Description

The objective of this technique is to provide a programmatic mechanism to identify input fields that require user input. The HTML 5 required attribute helps assistive technology (AT) users identity fields that require user input prior to submitting a form. When an input control with the required attribute receives focus, screen readers identify it as required. When a user attempts to submit a form containing an empty required field, many Web browsers provide visual feedback by rendering a border around the field and displaying a tooltip error message indicating the field requires user input.

Examples

The following example shows how the HTML 5 required attribute indicates that the email address field requires user input:

<label for="email">Email address:</label> 
<input type="text" name="email" id="email" required />

Resources

• HTML5 specification

Related Techniques

• ARIA2: Identifying required fields with the aria-required property
• G83: Providing text descriptions to identify required fields that were not completed
• G84: Providing a text description when the user provides information that is not in the list of allowed values
• G85: Providing a text description when user input falls outside the required format or values
• SCR18: Providing client-side validation and alert (Scripting)
• SCR32: Providing client-side validation and adding error text via the DOM (Scripting)

Tests

Procedure

1. Check whether the required input element contains a required attribute.

Expected Results

• Test #1 is true.