Go Main page
Go Main page

Web components

cover

components

Modal

v.1.0.0 | Saturn

Accessibility 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, although at Kubit strongly recommend their use to meet accessibility standars.

Use of images

Generally, images in modals will be decorative, so they have to be hidden for screen reader users. If for any reason, the image in the modal was informative, an accessible text description has to be included.

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.

For keyboard and screen reader users focus has to be restricted to the modal dialog and cannot access the base document until the modal is closed.

  • When a control pops up a modal, screen reader users have to be notified.
  • 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.
  • Once the modal is closed, focus should return to the element that triggered the modal.
  • If the modal has scroll, keyboard and screen reader users must be able to scroll with the arrow keys.

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

Technical references