TechPrufer
Get started
Glean
Glean logoGlean · Feature trail

Design System Accessibility

3 posts · Jan 2026 – Aug 2026

What this trail covers

Glean's design system has been revamped to prioritize accessibility by default. This includes standardizing components with opinionated APIs and design tokens, ensuring consistent behavior and appearance across the product. The system now leverages Base UI for out-of-the-box screen reader and keyboard accessibility, with components exposing correct roles, states, and relationships. Focus management for dialogs and interactive elements has been improved, reducing the likelihood of accessibility regressions. The company has also completed its VPAT, improving transparency during evaluations.

All Glean trails
  1. Designing Glean for accessibility – focus & shortcutsThis post details Glean's implementation of accessibility features, focusing on keyboard navigation and shortcut integration. It explains the use of `:focus-visible` for clear focus indicators, the importance of intuitive focus order, and the strategic use of `tabIndex`. It also covers shortcut implementation patterns like the Tab key for general navigation, arrow keys for directional movement within lists and tables, and F6 for region cycling. The post emphasizes documenting shortcuts for user discoverability and reiterates the commitment to WCAG 2.1 AA standards.
  2. Designing Glean for accessibility – screen reader, color schemes, & moreThis post details Glean's ongoing efforts to improve accessibility, focusing on screen reader experience, color schemes, and responsive design. For screen readers, it emphasizes using semantically appropriate HTML elements, providing explanations via alt text and ARIA attributes, and leveraging ESLint plugins for semantic issue detection. It also highlights the importance of concise attribute descriptions to avoid overloading users. For color schemes, it discusses the adoption of semantic colors for light/dark modes and the goal of AA-level compliance, with a potential for high-contrast mode. Responsive design is addressed by using Capacitor for mobile rendering and ensuring functionality at up to 400% zoom. Finally, it advocates for flexible font sizing using `rem` units and respecting browser preferences to adhere to WCAG standards.
  3. Designing Glean for accessibility – design system and complianceThis post details the revamp of Glean's design system to prioritize accessibility by default. Key technical changes include standardizing components with opinionated APIs and design tokens, leveraging Base UI for improved screen reader and keyboard accessibility, and enhancing focus management for dialogs and interactive elements. The migration involved auditing and resetting component baselines, enforcing tokenized systems for spacing, color, and typography using vanilla-extract and sprinkles, and ensuring components expose correct ARIA attributes and roles. The post also mentions the completion of Glean's VPAT.