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

[[Category:HTML5 Techniques]]

[[Category:Techniques In Development]]

== Status ==

* New technique.

== Applicability ==
This technique applies to HTML 5 form controls.

== WCAG references ==
This technique relates to:

* [http://www.w3.org/TR/2008/REC-WCAG20-20081211/#minimize-error-identified Success Criterion 3.3.1 Error Identification] (sufficient)
* [http://www.w3.org/TR/WCAG20/#minimize-error-reversible 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 <code>required</code> 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 <code>required</code> 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 <code>required</code> 
attribute helps assistive technology (AT) users identity fields that 
require user input prior to submitting a form. 
When an input control with the <code>required</code> 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 ==
* [http://dev.w3.org/html5/spec/Overview.html#the-required-attribute HTML5 specification]

=== Related Techniques ===
* [http://www.w3.org/WAI/GL/WCAG20-TECHS/ARIA2.html ARIA2: Identifying required fields with the aria-required property]
* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G83 G83: Providing text descriptions to identify required fields that were not completed]
* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G84 G84: Providing a text description when the user provides information that is not in the list of allowed values]
* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G85 G85: Providing a text description when user input falls outside the required format or values]
* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/SCR18 SCR18: Providing client-side validation and alert (Scripting)]
* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/SCR32 SCR32: Providing client-side validation and adding error text via the DOM (Scripting)]

== Tests ==
=== Procedure ===
# Check whether the required input element contains a <code>required</code> attribute.

=== Expected Results ===
* Test #1 is true.