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
  • 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 indicatorText cursor
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 shortcutchange of contextUse of the pointing device

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](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 statusFocus indicator

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!