Synonyms: Text field, edit, input, input field, text box, one-line plain text edit control

See also: Input field (multi-line), password input field, spin button, input field with autocomplete function, combined input field

Input fields allow for the inputting and editing of characters (numbers, letters, special characters) (see DIN EN ISO 9241-161: 8.12).

An input field is usually a rectangular area of the page that contrasts with its surroundings due to a border, a line or a different background color, for example. The input field can contain further control elements which are related to the value input.

Figure 38: One-line input field with a label on the left
No.PropertyDescriptionClassificationReference
583ContrastThe text in the input field must have a contrast of at least 4.5:1.MustEN 301 549: 9.1.4.3, 11.1.4.3
584ContrastThe border or line of the input field must have a contrast ratio of at least 3:1 with respect to the background of the page or the input field.

Alternatively, the contrast ratio between the background color of the page and the input field must be at least 3:1.
MustEN 301 549: 9.1.4.11, 11.1.4.11
585LabelThe input field must have a visible label (see Label)

Note: The labeling can also take place implicitly, e.g.

  • in the case of input fields in tables, using the column and row headings,
  • in the case of a search field, with the search button located behind it.

MustEN 301 549 9.3.3.2, 11.3.3.2
586LabelThe label should not be located in the input field, so that it is visible at all times and cannot be confused with a value.ShouldDIN EN ISO 9241-125: 5.1.14
587Focus visibilityIf the input field receives the keyboard focus, the focus indicator must be visible (see Focus indicator).MustEN 301 549: 9.2.4.7, 11.2.4.7
588Focus visibilityThe default text cursor must be displayed in the input field (see Text cursor).MustEN 301 549: 9.2.4.7, 11.2.4.7, 11.5.2.13
589ValueIf the input field may only contain certain characters or a particular input format is required and this is not apparent from the field label, it is necessary for an input instruction in the description or label to explain the permissible characters or the required input formats.MustEN 301 549: 9.3.3.2, 11.3.3.2
590ValueThe input field should be long enough to display the maximum number of characters without scrolling.

Note 1: For long text inputs, a multi-line input field should be used.

Note 2: This does not apply to font size adjustments of up to 400%.

ShouldDIN EN ISO 9241-143: 6.2.8
No.PropertyDescriptionClassificationReference
591Use of the keyboardIt must be possible to access, operate and exit the input field with the keyboard (see Use of the keyboard table, below).Must9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
592Use of the keyboardIf the input field contains other interactive elements such as buttons, these must receive the focus with the tab key after the input field.

Note: This does not apply to interactive elements for which a generally known use of the keyboard is implemented, such as a button for deleting the inputs in the input field. Nor does this apply to elements for which a keyboard shortcut was implemented, insofar as this keyboard shortcut is visually perceptible at the input field and with assistive technology.

MustEN 301 549: 9.2.2.1, 11.2.1.1
593UpdatesWhen focusing and operating the input field, no unexpected change of context may occur.MustEN 301 549: 9.3.2.1, 11.3.2.1, 9.3.2.2, 11.3.2.2
594Click areaThe click area of the input field should be at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2
595Click areaIt should be possible to place the focus on the input field by clicking on the input field or by clicking on the label.Should

Use of the keyboard: input field

Permalink "Use of the keyboard: input field"
ActionKeyClassification
Focusing of the input fieldTABRequired
Exiting the input fieldTABRequired
Entering a value[Inputting of printable characters]

Note: If certain characters cannot be entered, an appropriate implicit or explicit input instruction must be available at the input field. An implicit input instruction might, for example, be the “phone number” label which indicates that no letters can be entered.

Required
Navigating in the input fieldRIGHT/LEFT ARROW
POS1, END
Required
Deleting text in the input fieldDELETE, BACKSPACERequired
Highlighting text in the input fieldSHIFT+[any navigation key],
CTRL+A
Required
Removing the highlighting[any navigation key]Required
Pasting of text from the clipboardCTRL+VRequired
Copying or cutting highlighted textCTRL+C, CTRL+XRequired

Use of the pointing device: input field

Permalink "Use of the pointing device: input field"
ActionKeyClassification
Placing the focus on a specific position in the input fieldLeft click in the input fieldRequired
Placing the focus in the input fieldLeft click on the labelRecommended
Highlighting text in the input fieldDrag with the left mouse button pressedRequired
Highlighting a word in the input fieldDouble clickRecommended
Highlighting all content in the input fieldTriple clickRecommended
No.PropertyDescriptionClassificationReference
596RoleThe input field role must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
597RoleIf the technology used is able identify the input purpose of form fields, the purpose of the form fields must be marked for the data of the respective users (such as surname, date of birth, place of residence) according to https://www.w3.org/TR/WCAG21/#input-purposes".MustEN 301 549: 9.1.3.5, 11.1.3.5.1
598ValueThe value of the input field must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7
599StatusThe status of the input field must be communicated to the Accessibility API (see Element status).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
600NameThe input field must have a concise and expressive Accessible Name.MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8
601NameIf the input field has a description, it must be communicated as an Accessible Description.MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
602OperationIt must be possible to access, operate and exit the input field with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
603UpdateUpdates concerning the Accessible Name, value or status of the input field must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
604Desktop: PositionThe size and position of the input field must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 11.5.2.5, 11.5.2.13
605Desktop: PositionThe position of the text cursor in the input field must be communicated to the Accessibility API (see Focus indicator)MustEN 301 549: 11.5.2.13

Practical tip: one-line input field in Web applications

Permalink "Practical tip: one-line input field in Web applications"
  • JAWS: [label] input field [value] [instruction on text input]
  • NVDA: [label] input field [value]
  • Windows Narrator: [label] edit [value]

The input field should be implemented with the HTML element <input type=text>. For an input field which is used for entering search terms, <input type=search> can be used. The screen readers output the search field as a normal input field, i.e. the label must indicate the purpose which is the search. The initial value is communicated through the value attribute. The label of the input field should be linked to the input field with the <label for=ID> element. The maximum and minimum required length of the value can be determined with maxlength and minlength. Neither of the values are perceptible visually or with the use of assistive technology. If they are used, a corresponding instruction should be provided at the input field. If a particular input format is required, instead of <input type=text>, the following elements can be used:

  • <input type=tel> for telephone numbers,
  • <input type=email> for email addresses,
  • <input type=url> for Internet addresses,
  • <input type=text pattern=…> or inputs that must correspond to the regular expression in the pattern attribute,
  • <input type=number> for numbers (see Spin button),
  • <input type=date>, <input type=time> etc. for date and time information (see Date picker).

These input fields with a predefined format are automatically validated by the browser. The error messages of the browsers, however, are not accessible, and should therefore be replaced or supplemented with specific error messages from the application (see also: Browser validation of the required required attribute in Practical tip: programmatic label of required fields in Web applications.

The input fields for telephone numbers, email and Internet addresses as well as input fields with the pattern attribute are not identifiable either visually or with assistive technology – they are displayed as normal input fields and/or output by the screen reader. They must therefore be labeled in an expressive way and should also have operating instructions for the required input format.

The inputmode attribute can be used to specify which virtual keyboard should be displayed on mobile devices because corresponding details are expected (e.g. inputting of numbers, text, URLs, email addresses). The use of inputmode does not result in an automatic browser validation. Insofar as the keyboard that is used does not result from the type attribute of the input field, the use of inputmode is recommended, as assistive technology is also able to use this information appropriately, to display corresponding virtual keyboards, for example. It should be noted that the inputmode attribute replaces unnecessary input instructions, however.
The placeholder attribute can be used for a placeholder. However, it is recommended to display input instructions next to the field and to link them to the input field using aria-describedby. The placeholder attribute has the following disadvantages:

  • The contrasts are often insufficient (in respect to either the background or the text in the input field, which makes it difficult to distinguish between the placeholder and the value).
  • The placeholder is not displayed as soon as the field contains a value.

An input field can be marked as disabled (disabled) and read-only (readonly).

An input field can be marked as a required field with required.

Further information: 4.10.5 The input element - HTML Standard (whatwg.org)

If the input field is not implemented with the HTML element, it is also necessary to take account of the following:

  • The role is communicated with role=textbox.
  • For an input field which is used for entering search terms, role=searchbox can be used. The screen readers output the search field as a normal input field, i.e. the label must indicate the purpose which is the search.
  • The labeling of the input field can take place with aria-label or aria-labelledby.
  • The value of the input field is derived from the text content of the element which is marked with role=textbox.
  • The input field can be marked as a required field with aria-required, as disabled with aria-disabled, and as read-only with aria-readonly.
  • For a placeholder, aria-placeholder is used.
  • The presentation of the input field should be verified in Windows High Contrast mode.
  • The visible input field and the programmatically focused element should have the same position and size.

Further information: textbox role - 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!