Designing Glean for accessibility – screen reader, color schemes, & more

This 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.