User interface component
This term is defined by more than one standard, and the wording differs. Each definition below is the one that applies to that standard’s criteria.
Definition in RAWeb 1.1
A user interface component is an element with which the user can interact, for example a button, a link or an input. Some components can be more complex, such as a menu, a dialogue window or a tab system. Finally, a user interface component can be based on native HTML elements or developed from scratch using JavaScript and WAI-ARIA attributes. In particular, for elements with WAI-ARIA attributes corresponding to a design pattern it is recommended to consider the WAI-ARIA 1.1 Authoring Practices (opens in a new tab) document when implementing them.
Criteria in RAWeb 1.1
- 3.3 — On each web page, are the colours used in the user interface components or graphic element conveying information sufficiently contrasting (excluding special cases)?
- 10.13 — On each web page, is the additional content appearing when focused or when hovering over a user interface component controllable by the user (excluding special cases)?
- 12.11 — On each web page, is the additional content that appears when hovering, focusing or activating a user interface component accessible by keyboard if necessary?
Definition in RAAM 1.1
A user interface component is an element with which the user can interact, for example a button, a link or an input zone. Some components can be more complex, such as a menu, a dialogue window or a system of tabs. Finally, a user interface component can be based on elements native to the platform language or developed from scratch.
Note: Not all native HTML interface components are found in mobile application development languages. For example, radio buttons or checkboxes do not exist as such in applications developed for iOS. Developers will then need to use the most appropriate components available in development languages to fulfil a similar function. To reproduce what would be a list of radio buttons, it is possible, for example, to use lists of buttons associated with a selected or unselected state. Therefore, during screen reader tests, it is possible that the declared role does not correspond to the role displayed by the interface (for example, a button that looks like a radio button). Nevertheless, if the role and state of the component are relevant and accessible to assistive technologies, then the criterion will be considered compliant for this component.
Criteria in RAAM 1.1
- 2.3 — On each screen, are the colours used in the user interface components and the graphic elements conveying information sufficiently contrasted (excluding special cases)?
- 5.1 — Is each user interface component, if necessary, compatible with assistive technologies (excluding special cases)?
- 5.2 — Is every user interface component accessible and operable by keyboard and any pointing device (excluding special cases)?
- 8.7 — On each screen, is the additional content that appears when the focus is set or when a user interface component is hovered over controllable by the user (excluding special cases)?
Definition in WCAG 2.2
a part of the content that is perceived by users as a single control for a distinct function
Note 1: Multiple user interface components may be implemented as a single programmatic element. "Components" here is not tied to programming techniques, but rather to what the user perceives as separate controls.
Note 2: User interface components include form elements and links as well as components generated by scripts.
Note 3: What is meant by "component" or "user interface component" here is also sometimes called "user interface element".
Example: An applet has a "control" that can be used to move through content by line or page or random access. Since each of these would need to have a name and be settable independently, they would each be a "user interface component."
Source: WCAG 2.2 definition of “user interface component” (opens in a new tab) (W3C)