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

From WCAG WG


Status

  • New technique.

Applicability

This technique applies to HTML 5 form controls.

WCAG references

This technique relates to:

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

Related Techniques

Tests

Procedure

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

Expected Results

  • Test #1 is true.