What is a11y-foundation?

This project is an accessibility focused styling foundation for the web, built as a Vue 3 site that doubles as both a demo and a learning resource. It walks through four connected ideas: what the official accessibility standard, WCAG, actually requires, the practical craft of meeting those requirements, what modern CSS now makes possible without needing extra JavaScript, and finally proof that the approach genuinely works through automated and manual testing. At its core the project uses a layered CSS architecture called cascade layers, arranged so that a user's own preferences, like reduced motion, high contrast, or dark mode, always take priority over the site's own component styles, without relying on complicated specificity tricks or forcing styles with important flags. Colors are defined once as design tokens and then adapted automatically for light or dark themes using native CSS color functions, and a small theming engine can generate a full, contrast safe color palette from just two starting seed colors, with eight ready made presets to try. The site includes live demonstrations of individual WCAG accessibility rules, each with a toggle that lets you intentionally break the rule so you can feel exactly what it is meant to prevent. There is also a catalog of small demos showing off newer CSS platform features, organized by how widely each feature is supported across browsers, and a set of reusable SCSS mixins for detecting user preferences and input capabilities like touch versus hover. Newer browser features are added as progressive enhancements, meaning browsers that support them get a richer experience while older browsers still get something usable rather than a broken page. The project also ships a handful of accessible Vue components, written entirely in TypeScript, including a button, a modal dialog, and form fields with properly wired hints and error messages. This is described by its author as a playground and demo rather than something meant to be installed as a dependency in another project, aimed at developers who want to study or reference solid accessibility patterns in modern CSS and Vue. It has 13 stars.