New Accessibility Guidelines
Updated components to meet WCAG 2.2 Level AA standards with improved focus management and screen reader support.
-
MCDS
MCDS is a minimal component library that extends the awesome foundation of MCSS. It puts accessibility front and center—following WCAG (Web Content Accessibility Guidelines)—with a strong focus on Matthew Carter’s typefaces and elegant typesetting.
-
This design system follows WCAG 2.2 Level AA with proper ARIA attributes, screen reader support, keyboard navigation, and semantic HTML structure.
Built with modern CSS including logical properties, cascade layers, and relative units for optimal accessibility and maintainability.
Progressive enhancement with vanilla JavaScript - works without JS but enhanced with interactive features when available.
- Latest Updates
Welcome to MCDS - a minimal, accessible component library that prioritizes minimalism, sustainability, semantic HTML, and accessibility.
- Semantic HTML foundation
- WCAG 2.2 compliant
- Modern CSS with logical properties
- Progressive enhancement
Import components in your Astro files and use them with proper props. All components include comprehensive keyboard navigation and screen reader support.
Philosophy
Keep things simple! It uses system fonts and mostly system colors without dragging in heavy UI frameworks. It’s all about progressive enhancement—using JavaScript only when necessary—and applying modern CSS like logical properties, cascade layers, and relative units. And it all starts with good ol’ semantic HTML as the foundation.
Tech Stack
- Development
- Astro and Node.js
- Foundation Styling
- MCSS reset and base styles
- Component Styling
- The opposite of Tailwind garbage
Local Development
1. Clone the repository and cd into the main folder, then install dependencies:
npm install2. Start the development server:
npm run dev3. Import the component on a page:
import Alert from "path/to/components/Alert.astro";4. Then include the component:
<Alert type="success">
Operation completed successfully!
</Alert>Download the code on GitHub and happy coding!