This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.
Techniques/HTML5/Using the required attribute to indicate a required input field
- New technique.
This technique applies to HTML 5 form controls.
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
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
The objective of this technique is to provide a programmatic mechanism
to identify input fields that require user input. The HTML 5
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.
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 />
- 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)
- Check whether the required input element contains a
- Test #1 is true.