Accessibility

The components build on native controls where one exists, and on ARIA roles and states where none does. They link labels, hints and errors to the control for you. This page covers what every element shares; each component page adds its own keyboard keys and parts.

Names

• Fields are named by their label. There is no made-up fallback: without a label a field has no accessible name, and accessibility checkers flag it. In development builds, the date, time, range, tags and file fields also log a warning.
• Buttons and parts with no visible text always have a name, such as the button that opens a picker, the month buttons of a calendar, the parts of a date and the buttons of a file field. Each has a prop to change it, listed in the element’s API; an empty value keeps the default.
• Popups are named by their field’s label, or by a default name without one.
• Parts that only add context, such as the start and end of a range and the toolbars, have a default name that an empty value removes.

Descriptions, errors and states

• Hint. The hint is the field’s description, through aria-describedby, so screen readers read it after the name.
• Errors. While errors show, the control has aria-invalid="true" and points at them with aria-errormessage. The errors container has the alert role, so screen readers announce new errors as they appear.
• Required. required sets aria-required. The visual marker, an asterisk after the label, is hidden from screen readers so they don’t read it twice.
• Read-only and disabled. readonly sets aria-readonly; disabled disables the native control, so it leaves the tab order.

Keyboard

Every element works with the keyboard alone. Fields built on a native control, such as the text input or the select, keep its keys. Composite fields, such as the date and time pickers, the lists and the tags, have keys of their own: each component page lists them under Accessibility.

Focus and colors

• Focus. The focused control shows a ring, --gui-shadow-focus, in the color of --gui-border-focus. An invalid field shows --gui-shadow-focus-error instead.
• Contrast. When you change the colors in a theme, check the text, hint, error and button colors against their backgrounds.
• Forced colors. The carets keep the text color in Windows High Contrast and other forced-colors modes, so they stay visible.

Language

The names, announcements and validation messages the elements produce are in English by default. Translate them for your app with configureMessages(), and set the dir attribute for a right-to-left language. See i18n.