Accessibility Guidelines

This page gives some guidelines on how to work with Design System components to improve our product accessibility and enhance the usability for all users, including those with low vision, blindness, hearing impairments, cognitive impairments, motor impairments or situational disabilities.

Main element

To follow the ARIA Landmarks roles correctly, the root element of the application should be wrapped in a main element. This element will also be used to append React portal content.

Element labels

All input components (like Input, Checkbox or Select) require a descriptional label to be set. It is suggested to define a visible label via the label property. When it is not possible – aria-label or aria-labelledby should be set.

ESLint rules

Design System uses Styled components library for defining components and to enable correct a11y accessibility rule checks on the final elements – ESLint plugin eslint-plugin-styled-components-a11y should be added to projects using the Design System.