Skip to main content

Accessibility

At Croma Design System, we prioritize creating accessible and inclusive experiences for all users. Accessibility isn't just a consideration—it's a fundamental aspect of our design and development process. We follow best practices and guidelines to ensure that our components and interfaces meet the needs of users with diverse abilities.

REM vs PX​

In Croma Design System, we primarily use REM (Root Em) units instead of PX (Pixels) for defining measurements such as font sizes, spacing, margins, ... This decision is made to improve the flexibility, scalability, and accessibility of the design system.

  • Scalability: REM units are relative to the root font size <html> of the document. This allows the entire design to scale proportionally when users adjust their browser settings for different font sizes, ensuring better responsiveness across devices and user preferences.
  • Accessibility: Using REMs allows users with visual impairments to increase the base font size in their browser settings without breaking the layout or design of the page. This enhances the accessibility of the system for all users.
  • Consistency: REMs maintain consistency in spacing and typography across the application, as everything scales based on a single root value. This results in a more cohesive design experience.

If the browser root font size is set to 16px, 1rem will equal 16px. For example, a font-size: 1.5rem would equal 24px (1.5 x 16px).

We choose REM over PX to ensure that our design system is adaptable, future-proof, and user-friendly. By prioritizing flexibility and scalability, we help ensure that Croma Design System meets the needs of all users across a variety of devices and screen sizes.

Semantic HTML and ARIA roles​

We emphasize the use of semantic HTML elements to create structures that are inherently accessible. Properly using elements such as <header>, <nav>, <main>, and <footer> helps screen readers and assistive technologies understand the page layout.

Additionally, we use ARIA (Accessible Rich Internet Applications) roles and attributes to enhance accessibility where semantic HTML falls short. ARIA provides additional context and functionality to dynamic elements, such as:

  • aria-label: Used for labeling elements that lack a visible label.
  • aria-hidden: Hides elements from screen readers that don't need to be announced.
  • aria-live: Notifies screen readers of updates in dynamic content.
Example
<button aria-label="Close Modal" class="cds-button cds-button--tertiary">
  <span class="cds-button__icon cds-ph-x"></span>
</button>

Keyboard navigation​

We ensure that all interactive elements within Croma Design System are fully navigable via keyboard. This includes providing clear focus states and supporting standard navigation patterns like Tab, Enter, and Esc. We also follow the WCAG (Web Content Accessibility Guidelines) to ensure focus is manageable and consistent across all elements.

For complex components like navigation, tabs or dropdowns we implement the necessary keyboard interactions, such as:

  • Tab: To move between focusable elements.
  • Shift + Tab: To move backward through focusable elements.
  • Esc: To close modals or exit navigation.

Color contrast​

We ensure that all text, buttons, and interactive elements provide sufficient contrast against their backgrounds, enhancing readability for users with visual impairments, including color blindness.

Our design adheres to WCAG 2.1 standards, which recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, ensuring accessibility for all users.

Focus management​

Managing focus is crucial for accessibility. We ensure that when users interact with a component, such as opening a modal or expanding a menu, focus is directed to the relevant part of the UI, preventing disorientation.

In addition, we maintain clear and consistent visible focus states for all interactive elements, ensuring keyboard and screen reader users can easily identify which element has focus.

:focus-visible {
    outline: 2px solid var(--cds-color-focus-outline) !important;
    outline-offset: 1px !important;
}

Accessible forms and inputs​

We follow best practices for form accessibility, ensuring that labels are clearly associated with inputs using for and id attributes.

Additionally, we use appropriate form controls and error messages that are accessible to both screen readers and users with cognitive impairments.

<div class="cds-textfield">
    <label for="username" id="username-label" class="cds-textfield__label">Username</label>
    <input type="text" id="username" class="cds-textfield__field" aria-labelledby="username-label" aria-describedby="username-help">
</div>

Conclusion​

Accessibility is a cornerstone of Croma Design System, and we are committed to continuously improving and evolving our approach to ensure that all users, regardless of their abilities, can interact with our design system effectively. By following established best practices and using ARIA roles, keyboard navigation, color contrast checks, and more, we create a more inclusive digital experience.

We believe that accessibility benefits everyone, and through consistent application of these principles, we aim to deliver designs that work for all users.