Overview
The textbox role serves to designate an element capable of receiving unrestricted text input. Whenever feasible, it is advisable to opt for an <input> element with the type attribute set to "text" for single-line input, or a <textarea> element for multi-line input.
Semantic Markup
- Use <textarea> element for multi-line input
- Provide a clear label
- A textarea needs to be combined with a button that has a clear label
WAI-ARIA
- textbox is the Implicit ARIA role
- 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 |
Further Links
Mozilla Developer | Mozilla Developer 2 | Magenta A11y