Input field (one-line) - Accessible design of user interface elements

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

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.

Presentation

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.

Text cursor). | Must | EN 301 549: 9.2.4.7, 11.2.4.7, 11.5.2.13 | | @!589 | Value | If 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. | Must | EN 301 549: 9.3.3.2, 11.3.3.2 | | @!590 | Value | The 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%.

| Should | DIN EN ISO 9241-143: 6.2.8 |

No.	Property	Description	Classification	Reference
583	Contrast	The text in the input field must have a contrast of at least 4.5:1.	Must	EN 301 549: 9.1.4.3, 11.1.4.3
584	Contrast	The 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.	Must	EN 301 549: 9.1.4.11, 11.1.4.11
585	Label	The input field must have a visible label (see

Operation

keyboard shortcut is visually perceptible at the input field and with assistive technology.

No.	Property	Description	Classification	Reference
591	Use of the keyboard	It must be possible to access, operate and exit the input field with the keyboard (see Use of the keyboard table, below).	Must	9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
592	Use of the keyboard	If 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

Use of the keyboard: input field

Action	Key	Classification
Focusing of the input field	TAB	Required
Exiting the input field	TAB	Required
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 field	RIGHT/LEFT ARROW POS1, END	Required
Deleting text in the input field	DELETE, BACKSPACE	Required
Highlighting text in the input field	SHIFT+[any navigation key], CTRL+A	Required
Removing the highlighting	[any navigation key]	Required
Pasting of text from the clipboard	CTRL+V	Required
Copying or cutting highlighted text	CTRL+C, CTRL+X	Required

Use of the pointing device: input field

Action	Key	Classification
Placing the focus on a specific position in the input field	Left click in the input field	Required
Placing the focus in the input field	Left click on the label	Recommended
Highlighting text in the input field	Drag with the left mouse button pressed	Required
Highlighting a word in the input field	Double click	Recommended
Highlighting all content in the input field	Triple click	Recommended

Programming/interfaces

Focus indicator) | Must | EN 301 549: 11.5.2.13 |

No.	Property	Description	Classification	Reference
596	Role	The input field role must be communicated to the Accessibility API (see

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]

HTML

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)

ARIA

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)

Date:: 15.01.2024
License:: CC-BY-SA 4.0
Version:: 1.0

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