Go Main page
Go Main page

Web components

cover

components

Overlay

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 overlay 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.

Keyboard interaction and Screen-reader experience

This component can be interacted only with the mouse to close the modal window. However, it should not receive focus on keyboard or screen reader navigation. Screen reader and keyboard users will not be able to navigate underneath the overlay.

Color contrast

  • The opacity of the overlay can create elements with low color contrast. However, there is no requirement for those elements below the overlay.
  • For the rest of elements at least of 3:1 color contrast ratio is needed.

Related components

Technical references