components
Snackbar
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 snackbar 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.
It could be difficult for magnifier users to perceive and find the snackbar, for this reason, snackbar shouldn't be used for crucial information. Use the message component instead.
Types
Informative
- Shows a non-critical message and it has no interactions (buttons, links, etc.).
- It does not have a close button.
- The keyboard or screen reader focus should not move to the snackbar, it should stay on the same one it was on before the snackbar appeared.
- After 10 seconds disappears.
With interactive elements
- The screen reader user must be alerted and read the message when it appears.
- The interactive elements must be accessible with the keyboard and for the screen reader user.
- Need a "Close" button.
- Needs to be closed (it doesn't disappear automatically except if the user leaves the page or screen).
Icons
Icons used in the snackbar can be decorative or informative.
- Decorative icons have to be hidden for screen reader users.
- Informative icons have to include an accessible text description.
Accessible behaviour
Text should be short, concise, and non-critical messages to indicate the completion of a task or process. In order to make them accessible the following considerations have to be taken into account:
- Enough time to read.
- Position on the screen.
- If exceptionally interactive elements they are included, they have to be operable through a keyboard or keyboard interface and also need a logical keyboard focus order.
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.
It will be needed to use some WAI-ARIA techniques in order to notify screen readers users that a mbSnackBar has appeared and to read their content.
The tab navigations order must be:
- The action link.
- The close button.
- The first focusable element in the page or screen. If the user does not close the message and continues tabbing:
- The next tab will go to the first interaction element of the page or screen.
- The position in the keyboard navigation order, when you want to reach it again, will be just before the footer of the web page.
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:
