components
Input Digit Sequence
v.1.0.0 | SaturnAccessibility is a crucial consideration when designing and developing components, as it ensures that all users, regardless of their abilities or limitations, can interact effectively with your project. In this section, we will explore how our inputDigitSequence has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience.
The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.
Usage
In the component, each position needs a visual label.
Text
They need a visible text labels that clearly indicate their purpose. Helper texts and error messages must clearly indicate the information. In error messages, when possible, include information about how to correct them.
Icon
- Error icon needs an accessible text label, such as "Error". The icon will be indicated as decorative when the message itself indicates to the user that it is an error message.
- Other decorative icons such as "hide" and "show", should be hidden for screen reader users.
Screenreader and Keyboard interactions
To support screen reader users, this component should include WAI ARIA attributes (the alt and aria specific props) to have a correct semantic markup. Screen reader and keyboard users should be able to operate with all the interactive elements.
If there is an error in the inputDigitSequence this error information has to be announced to screen reader users. For web, it could be necessary to use WAI-ARIA techniques in order to do so.
Special considerations
Although from an accessibility point of view, it is not a good practice changes in context, if after filling an input there is an automatic jump to the next:
-
It is needed to include a visual text instruction. For eg. "Complete positions X, X, and X of your [detail] (When entering the data, the position changes automatically)".
-
Keyboard-only and screen-reader users, have to be able to clear what they have entered in a field and to navigate back to fields that have already been filled in if they need to modify them.
For screen reader users:
- Each input needs a proper semantic markup.
- Input labels have to clearly identify what has to be entered. Eg: "Position 1".
- When the jump happens, the new input field has to be announced correctly.
Visual design
Color contrast
- For text labels in links needs a color contrast of at least 4'5:1 for regular text and 3:1 for large scale (18pt) or bold text (14pt). – For the rest of elements and the focus indicator at least of 3:1 color contrast ratio is needed.
Target Size
The area for clicking and tapping buttons must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.