Go Main page
Go Main page

Web components

cover

components

Accordion

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

Screenreaders

When the screen reader user gets to an accordion arrow, the accessible title for that accordion arrow should be read. If accordions use a correct semantic markup though the _ alt_ and aria specific props:

  • Screen reader could know that an accordion is an accordion.
  • Screen reader users could use the shortcuts to access directly to them.

Keyboard interaction

Accordions should be operable through a keyboard or a keyboard interface:

  • Space or enter keys when focus is on the accordion header of a collapsed section, expands the section.
  • Tab key moves focus to the next focusable element. All focusable elements in the accordion are included in the page Tab sequence.
  • Shift+Tab keys move focus to the previous focusable element.

For further recommendations on expected keyboard interaction, check the WAI-ARIA pattern for Accordions.

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 or bold text.
  • 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 links must be large enough. The recommended size of the target for pointer inputs is at least 24x24px and 44x44px for best readability.

References