components
Selector box file
v.1.0.0 | Saturn
StorybookAccessibility 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 selectorBoxFile 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, although at Kubit strongly recommend their use to meet accessibility standars.
Text
- Title is a heading that informs users about the purpose of the upload section. Keep the heading short and concise.. If there are several file uploaders, each of them must have its own description, different from the others.
- Subtitle indicates the characteristics that the information to be provided must have in order for it to be valid.
- Button labels should be concise and describe the action that will be taken upon click.
- Error messages about file uploads must be exposed to assistive technology. They should provide clear guidance to help the user resolve the error.
Icons
Decorative icons have to be hidden to screen reader users, avoiding repetitive information.
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.
The component has six different states that the screen reader must correctly scan so that users know how to interact it and which actions can or not do.
Screen reader users need to know when there is a change in the upload status of the file: uploading, uploaded and upload error.
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.
Related components
Check other components specific accesibility recommendations:
