Synonyms: Required form fields, required input, required
See also: error message, label, element status
A required field label is a visual indicator for form fields that have to be filled out. In this respect, for example, an asterisk (*) can be used to indicate that a form field has to be filled out.
Presentation
Permalink "Presentation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 198 | Presentation | Required fields must be visually perceptible. Note 1: The optional fields can also be labeled instead of the required fields. Note 2: If the required fields are also identifiable from the context without a label (e.g. on a login page with two input fields for the user name and password), then the required field label can be omitted. Note 3: Required fields must be labeled consistently in the application. Note 4: In the case of Gruppen of radio buttons and check boxes, the required field label should be situated at the label of the group insofar as a random element of the group has to be selected. | Must | EN 301 549: 9.3.3.2, 11.3.3.2 |
| 199 | Contrast | The required field label in graphic form must have a contrast ratio of at least 3:1 with respect to the background. The required field label in text form must have a contrast ratio of at least 4.5:1 with respect to the background. | Must | EN 301 549: 9.1.4.3, 11.1.4.3, 9.1.4.11, 11.1.4.11 |
| 200 | Color | Required fields should not only be labeled with the use of color (e.g. a different border color). Note: Color can be used as an additional means of the required field label. | Must | EN 301 549: 9.1.4.1, 11.1.4.1 |
Programming/interfaces
Permalink "Programming/interfaces"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 201 | Status | The required field status must be communicated to the Accessibility API (see Accessibility API). Note 1: The programmatic required field labeling should take place using an attribute of the programming language provided for this purpose or using the textual supplement in the Accessible Name of the form field (e.g. asterisk). The redundant programmatic marking of the required fields with attribute and supplement in the Accessible Name label should be avoided. Note 2: If filling out a form field group is labeled as required without the necessity for every field of the group to be filled out, the programmatic required field labeling should only take place at the group and not at every field. In this case, care must be taken to ensure that the required field label of the group is communicated correctly to the Accessibility API. | Must | EN 301 549: 9.1.3.1, 11.1.3.1, 9.3.3.2, 11.3.3.2, 9.4.1.2, 11.4.1.2 |
Practical tip: required field label
Permalink "Practical tip: required field label"Required fields can be labeled with a corresponding textual supplement, such as “required field” or “required”. If the majority of the fields are required, the fields that do not need to be filled out can alternatively be labeled with “optional”, for example.
The required fields can also be marked with a symbol. The asterisk (“*”) has established itself for this purpose, in which it can be assumed, at least in specialist applications, that it is known to all users. If another character is used, its meaning should be explained at the beginning of the form.
Practical tip: programmatic label of required fields in Web applications
Permalink "Practical tip: programmatic label of required fields in Web applications"Screen reader output
Permalink "Screen reader output"- JAWS: required invalid entry | required [after the role and before the value]
- NVDA: required invalid entry | required [after the role and before the value]
- Windows Narrator: required invalid | required [after the value]
Note: A required field which is not filled out but which has been marked with required is in the incorrect status due to the HTML specification, and is therefore output by the screen readers as “invalid entry” and/or “invalid”. The problem does not occur when using aria-required.
HTML
Permalink "HTML"Required fields can be marked with the required attribute..
- Form fields that have been marked as required are automatically validated by the browser and will have an incorrect status if they have not been filled out.
- Form fields that have been marked as required are not automatically visually identifiable as required fields. They have a tooltip, (e.g. “Please complete this field”), which is not perceptible to users of the keyboard and with the screen reader, however, as it is only displayed in the case of a mouse over.
- By default, a form which has required fields that have not been filled out cannot be submitted. Instead, the focus is placed in the first incorrect field and the tooltip is displayed as an error message and output by the screen reader as a warning message (analogous to
role=alertalert). These error messages are not accessible for the following reasons:- When exiting the field, the error message is hidden automatically and cannot be displayed again.
- Several browsers automatically hide error messages after a few seconds, even if the focus is in the field (with Chrome and Edge, for example).
- The error message is only displayed at the first incorrect field. Other required fields that are not filled out are not to be perceived as incorrect.
Therefore, when using required, the following should be considered:
- Required fields must also be visually labeled as such.
- The visual required field label should be marked so that it is not output by the screen reader to avoid the redundant output.
- The application should continuously display its own error messages for all required fields that have not been filled out.
Note: In the practical tip on radio buttons and checkboxes , the particularities regarding their marking up as required fields are explained.
Further information 4.10.5.3.4 The required attribute - HTML Standard (whatwg.org)
ARIA
Permalink "ARIA"Required fields can be marked with the aria-required=true attribute.
- Form fields that have been marked with
aria-required=trueare not automatically validated by the browser and will not have an incorrect status if they have not been filled out. The incorrect status can be communicated witharia-invalid=true. - Form fields that have been marked with
aria-required=trueare not automatically visually identifiable as required fields.
Further information: aria-required property - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link)
Information about this article
You are welcome to send feedback by email about our handout!