Input field (one-line)

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.

• JAWS: [label] edit [value] [instruction on text input]
• NVDA: [label] edit [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

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

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