Accessibility

At ClickHouse, we believe that accessibility is not just a nice-to-have feature, but a fundamental aspect of our product philosophy. Our mission is to make data analysis and visualization accessible to everyone, regardless of their abilities or circumstances. This commitment is reflected in every aspect of our design system and component library.

Built on Strong Foundations

Our component library is built on top of Radix UI, ensuring that our components follow ARIA best practices and WAI-ARIA guidelines. While we inherit many accessibility patterns from Radix UI, we’re actively working to enhance our components with additional accessibility features.

Current Accessibility Features

Our components currently include the following accessibility features:

• Color Contrast: We follow WCAG AA guidelines for color contrast.
• Keyboard Navigation: Basic keyboard support is inherited from Radix UI.
• Screen Reader Support: Components use appropriate ARIA roles and labels.
• Focus Management: Basic focus management is implemented.

Accessibility Features by Component

Each component in our library includes specific accessibility features:

• Buttons: Proper ARIA labels, keyboard support, and focus states
• Dialogs: Proper modal behavior with focus trapping and escape key support
• Menus: Keyboard navigation with proper ARIA roles and states
• Forms: Clear labels, error states, and validation messages
• Tables: Proper ARIA roles for headers and rows
• Charts: Semantic HTML structure with ARIA labels for data points

Continuous Improvement

We’re committed to ongoing accessibility improvements. Our team regularly audits our components against WCAG guidelines and user feedback, ensuring that our library remains at the forefront of accessible design. We welcome feedback from users and are always looking for ways to enhance our accessibility features.

Developer Recommendations

When using our components, we recommend:

1. Always provide meaningful labels for interactive elements
2. Ensure proper nesting of components
3. Use semantic HTML where possible
4. Test with keyboard navigation
5. Verify color contrast using our design tokens
6. Test with screen readers
7. Follow our component documentation for accessibility guidelines

By choosing ClickHouse’s component library, you’re not just getting a set of UI components - you’re gaining access to a comprehensive accessibility framework that helps ensure your applications are usable by everyone.