components
Olive Menu
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 oliveMenu 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 button that opens the actionBottomSheet needs and accessible label.
- For web: The menu is hidden by clicking on the close button or by clicking outside the action sheet area.
- For mobile: The options menu can be hidden by swiping down on the handle or tapping the close button.
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.
Options button
- With the "Enter" or "Space" keys it should be possible to display the dialog box with the different options.
- When the dialog box is displayed, the keyboard focus must be positioned above the "X" button.
Options dialog
- If the "ESC" key is pressed, the dialog closes and the keyboard focus returns to the options button.
- With the "Tab" key the user moves to the next interaction element. If the user continues tabbing after the last option, the keyboard focus to the first interaction element which in this case would be the "X" button.
- With the "Shift+Tab" keys the user moves to the previous interaction element. If the user is on the first interaction element and presses the "Shift+tab" keys, the keyboard focus would go to the last interaction element of the dialog.
Options buttons
To select an option button, use the "Enter" or "Space" key.
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:
