Text Input

A text input field allows users
to enter a single line of text into a UI

Overview

The input role serves to designate an element capable of receiving a single line of text. Use a <textarea> element for multi-line input.

Semantic Markup

Provide a clear label

A textarea needs to be combined with a button that has a clear label

Input Types

text	Default value. A text input field for a single-line of text
password	Single-line of text; obscured input
email	Requires email [e.g. username@service.com] input
url	Requires a domain [.e.g. migros.ch] input

WAI-ARIA

Aria-labels should be used when there is no visible text on the page that can be used to describe the purpose of the element. This can be especially useful for elements that are interactive, such as buttons, links, and form elements, as well as for images that convey meaning but have no alternative text.

.sr-only class is used to hide an element visually, but keep it accessible to screen readers. It is commonly used to hide elements such as form labels or instructions that are required for a11y, but are not necessary for sighted users.

Keyboard Interactions

tab	Focus moves to the input, incl. visible focus additional tab selects preceding icon
enter	opens preceding icon

Further Links

Mozilla Developer | Mozilla Developer 2 | Magenta A11y