components
Drawer
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 drawer 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.
Behaviour
The first level modals should only have a close icon, avoiding the back icon (through leftIcon and rightIcon props), as the same action can be performed in different ways making it repetitive. Keep the back icon only for second level modals in the drawer component.
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.
First level modal
- Screen readers must correctly announce a modal is opened.
- Focus must not move outside the modal until the modal is closed: it is very important for keyboard and screen reader users restrict the focus to the modal dialog and cannot access the base document until the modal is closed.
Second Level modal
- Screen readers must correctly announce the apparition of a new different modal. The back button needs a correct accessible label text that announces to come back to the drawer level 1.
- Focus must not move outside the second level modal until the option is selected or the back button is pressed: it is very important for keyboard and screen reader users restrict the focus to the modal dialog and cannot access the first level modal until an option is selected or the back button is pressed.
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:
