Required field label

Synonyms: Required form fields, required input, required

Siehe auch: 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.

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.

Note: Color can be used as an additional means of the required field label.

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.

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.

• 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.

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)

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 with aria-invalid=true .
• Form fields that have been marked with aria-required=true are 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

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!