Accessible Astro Starter

The Accessible Astro Starter is a ready-to-use, SEO and accessibility-focused Astro template designed for building inclusive websites. It adheres to modern web standards, WCAG 2.2 AA guidelines, and European Accessibility Act (EAA) compliance. The template integrates Tailwind CSS 4, a comprehensive component library with enhanced form validation, a color contrast checker, and typography featuring the Atkinson Hyperlegible font for improved readability. It also supports dynamic blog/portfolio pages with social sharing, contact forms, and full MDX capabilities.

Our mission is to provide developers with accessible, easy-to-use components that simplify and accelerate the creation of inclusive web applications, without compromising on customization or performance.

Key accessibility features include:

• Astro 5.13.0+ & Tailwind CSS 4.1+: Modern framework and styling for robust development.
• TypeScript & ESLint Integration: Enhanced code quality with path aliases and strict accessibility settings (eslint-plugin-jsx-a11y).
• Markdown & MDX Support: Comprehensive content authoring with examples and components.
• Modern Color System: OKLCH color system with automatic palette generation.
• Atkinson Hyperlegible Font: Improved readability and accessibility for all users.
• Lucide Icon Set: Consistent and friendly icons via astro-icon.
• Semantic HTML Structure: Proper use of Button, Link, and Heading components.
• Excellent Performance: High Lighthouse/PageSpeed scores.
• Accessible Landmarks: Correct use of header, main, footer, section, and nav.
• Outline Focus Indicator: Clear focus states for keyboard navigation on all backgrounds.
• ARIA Attributes: Enhanced experience for screen reader users.
• Dynamic Routes: [...page].astro and [post].astro for dynamic blog/portfolio pages with breadcrumbs and pagination.
• Custom 404 Page: 404.astro for a customizable error experience.
• Optimized Components: Header.astro, Footer.astro, SkipLinks.astro, Navigation.astro (with keyboard accessible dropdowns), ResponsiveToggle.astro, and DarkMode.astro (with user system preferred color scheme).
• SEO Component: SiteMeta.astro for custom metadata.
• .sr-only Utility Class: Visually hidden text for screen readers.
• prefers-reduced-motion: Disables animations for users with this preference.
• Comprehensive Component Library: Includes ColorContrast.astro, BlockQuote.astro, BreakoutImage.astro, Logo.astro, SocialShares.astro, PageHeader.astro, FeaturedPosts.astro, and FeaturedProjects.astro.
• Enhanced Form Validation: WCAG 2.2 compliant Form, Input, Textarea, Checkbox, Radio, and Fieldset components with automatic validation and error handling.
• Specialized Pages: Contact page with validation demos, Thank-you page, Accessibility Statement template, and an interactive Color Contrast Checker.
• Sitemap Generation: Comprehensive sitemap page and automatic XML sitemap generation via @astrojs/sitemap.
• Smooth Interactions: Micro-interactions and animations respecting reduced motion preferences.
• SCSS & CSS Utilities: Comprehensive SCSS utility classes and CSS with logical properties and custom properties.
• Accessible Styling: Clear focus states for buttons and hyperlinks, and styled <kbd> for keyboard shortcuts.