components
Functionalities Module
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 functionalitiesModule 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.
Responsive behaviour
The component has a different interaction behaviour in mobile views (tablet and mobile):
- Menu options appears in a ActionBottomSheet and it is triggered by a button or icon.
- The button that triggers the action and opens the component needs and accessible label.
Icons and images
- Decorative images have to be hidden for screen reader users.
- Informative images need a text description that convey the information represented.
Tabs
- Use clear and short text labels.
- The first tab should be the most commonly-needed.
- Stick to only one row of tabs.
- Use tabs to alternate between views within the same context, not to navigate to different areas.
- Highlight the selected tab. Do not use only color in order to do so.
Keyboard interaction and Screen-reader experience
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. In the page structure, it should have a heading (screen reader only), landmark or another suitable markup in order to make easy to understand and find them for screen reader user.
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:
