Form must be wrapped in form element
A form must be wrapped in a <form> element.
form/accessibility
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Required fields must be identified programmatically
Required fields must be identified programmatically, either via the label or with aria-required.
Form components need accessible naming
Remember to supply an aria-label, aria-labelledby or title to the component to comply with accessible naming requirements.
Helper text must be surfaced to assistive technologies
Helper text and other instructions should be surfaced to users via aria-describedby or other accessible techniques. See Programmatically associate inputs with labels for more information.
Carbon keyboard operation in form components
Carbon bakes keyboard operation into the components that make up a form, improving the experience of blind users and others who operate via the keyboard.
Toggletip for form help text keyboard accessibility
Carbon provides an information icon using the toggletip component to ensure form help text is predictable and keyboard accessible. The toggletip is a button in the tab order. Both Space and Enter open the tip, and Esc dismisses it.
Carbon error handling in forms
Carbon incorporates accessible inline error and warning messages into many components, such as text inputs. Error states are also conveyed programmatically to assistive technologies.
Required fields legend at form start
Traditionally, a legend at the start of a form identifies the symbol (often an asterisk) used for required fields, and the symbol is repeated as part of the label for each appropriate field. This is still considered the most accessible implementation. An instruction should precede a form, providing context for whether required or optional fields are indicated, especially where only optional fields are marked. The traditional phrasing is 'All fields are required unless marked as optional' or the reverse.
Login forms do not need required field instruction
By convention, simple username/password login forms do not need an instruction identifying required fields or even to be marked as required, since the context is clear to users.
Form components with accessibility considerations
The following form components each have their own accessibility considerations which improve the overall form experience: Checkbox, Date picker, Dropdown, File uploader, Loading, Modal, Notification, Number input, Radio button, Select, Slider, and Text input.
Design annotations needed for specific form instances
Design annotations are needed for specific instances in forms, but Carbon already incorporates accessibility into the components that make up a form. Refer to form components' individual accessibility tabs for specific considerations.