Accessibility Guidelines

Ensuring inclusivity in our digital products.

Core Principles

Our design system prioritizes accessibility, ensuring that all users, regardless of their abilities, can perceive, understand, navigate, and interact with our digital interfaces. Adherence to these guidelines is crucial for creating an equitable user experience.

Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
Operable: User interface components and navigation must be operable.
Understandable: The information and the operation of the user interface must be understandable.
Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Color and Contrast

Sufficient contrast between text and background is vital for readability, especially for users with low vision or color blindness. We adhere to WCAG 2.1 AA standards.

Minimum contrast ratio of 4.5:1 for normal text.
Minimum contrast ratio of 3:1 for large text (18pt or 14pt bold).
Avoid conveying information solely through color. Use patterns, text labels, or icons as alternatives.

Example: This blue text on a light background has sufficient contrast.

Example: This dark text on a very light orange background also meets contrast requirements.

Keyboard Navigation

All interactive elements must be fully accessible and operable using a keyboard alone. This includes navigation, form submission, and custom controls.

Ensure a logical focus order when tabbing through elements.
Provide a visible focus indicator for the currently selected element.
Avoid keyboard traps where a user cannot navigate away from an element.

Try tabbing through the elements on this page. You should see a clear visual indicator highlighting the element that currently has keyboard focus.

Semantic HTML and ARIA

Using semantic HTML elements correctly provides inherent accessibility. For custom components or dynamic content, ARIA (Accessible Rich Internet Applications) attributes can enhance screen reader compatibility.

Use headings (<h1> to <h6>) to structure content hierarchically.
Use landmarks like <nav>, <main>, and <aside>.
Provide alt text for images that conveys their meaning or function.
Use ARIA roles, states, and properties appropriately for custom widgets (e.g., role="button", aria-expanded).

Forms and Input

Forms are a common point of interaction and require careful design for accessibility.

Clearly associate labels with their form controls using the for attribute.
Provide clear error messages that are programmatically linked to the relevant input.
Indicate required fields clearly, not just with color.

Beyond the Basics

Consider users with cognitive disabilities, motor impairments, and situational limitations. Aim for clarity, predictability, and flexibility in your designs.

Keep navigation consistent across the site.
Provide clear and concise instructions.
Avoid flashing content or animations that could trigger seizures.
Allow users to control media playback (pause, stop, volume).

Explore Widget Catalog