components
Confirmation Message
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 confirmationMessage has been developed with accessibility in mind, ensuring that all users have a smooth and meaningful experience.
[!INFORMATIVE] The following mencioned props and recommendations are optional, althougt at Kubit strongly recommend their use to meet accessibility standars.
Text
Use especific text labels. Labels should have a meaningful and unique visible text label that clearly specify their purpose. This pattern can be followed:
- Heading: brief description of what is happening.
- Messages: full description of what is happening and alternatives for the users.
- Actions: buttons or links.
Use of images
Images in the component can be considered as decorative or informative depending on the confirmation message:
- If the text clearly shows the type of message: success, error, warning, this icons can be considered as decorative and have to be hidden for screen reader users.
- If the message is not clear, the icons "success", "error", "warning", etc. will need an accessible text description.
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 order to facilitate the navigation for screen reader users, mbConfirmationMessage titles have to be marked up as headings. If a heading screen reader only is needed, the development team has to include it in the code.
Ensure that screen readers correctly scan the confirmation message by reading in order all the areas: Title, description and footer.
When the screen reader user gets to a confirmationMessage, the accessible title needs to be read. If confirmationMessage use a correct semantic markup:
- Screen reader and keyboard users would be able to interact with the interactive elements within the confirmation message.
- Screen reader users could use the shortcuts to access directly to the interactive elements within the confirmation message.
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:
