A ready-to-use, SEO and accessibility-focused Astro starter template. Built with modern web standards and WCAG guidelines in mind, it provides a solid foundation for creating inclusive websites. Features Tailwind CSS 4 integration, comprehensive component library, color contrast checker, and typography with Atkinson Hyperlegible font for improved readability. Includes dynamic blog/portfolio pages with social sharing, and full MDX support.
(Accessibility) Features
- Astro 5.7.5+
- Tailwind CSS 4 support
- TypeScript integration with path aliases for easier imports
- Prettier integration with prettier-plugin-astro and prettier-plugin-tailwind
- ESLint integration with strict accessibility settings for eslint-plugin-jsx-a11y
- Markdown and MDX support with comprehensive examples and components
- Modern OKLCH color system with automatic palette generation from primary/secondary colors
- Atkinson Hyperlegible font for improved readability and accessibility
- Lucide icon set via astro-icon for consistent, friendly icons
- Excellent Lighthouse/PageSpeed scores
- Accessible landmarks such as header, main, footer, section and nav
- Outline focus indicator which works on dark and light backgrounds
- Several aria attributes which provide a better experience for screen reader users
- [...page].astro and [post].astro demonstrate the use of dynamic routes and provide a basic blog with breadcrumbs and pagination
- 404.astro provides a custom 404 error page which you can adjust to your needs
- Header.astro component with optimized accessibility and design
- Footer.astro component with informative content and links
- SkipLinks.astro component to skip to either the main menu or the main content
- Navigation.astro component with keyboard accessible (dropdown) navigation and highlighted menu item option
- ResponsiveToggle.astro component with accessible responsive toggle functionality
- DarkMode.astro component toggle with accessible button and a user system preferred color scheme setting
- SiteMeta.astro SEO component for setting custom meta data on different pages
- sr-only utility class for screen reader only text content (hides text visually)
- prefers-reduced-motion disables animations for users that have this preference turned on
- Components including ColorContrast.astro, BlockQuote.astro, BreakoutImage.astro, ExternalLink.astro, Logo.astro, SocialShares.astro, and PageHeader.astro
- Blog and portfolio pages with featured images, author details, social sharing, and breakout images
- Accessibility Statement template page
- Color Contrast Checker interactive page
- Smooth micro-interactions and animations on hover, open and close states (respecting reduced motion preferences)
- Comprehensive SCSS utility classes
- CSS with logical properties and custom properties
- Accessible button and hyperlink styling with clear focus states
- Styled <kbd> element for keyboard shortcut documentation
Getting started
- Clone the repository or use as a template
- npm install Installs dependencies
- npm run dev Starts local dev server at localhost:4321
- npm run build Build your production site to ./dist/
- npm run preview Preview your build locally, before deploying
Read the documentation to learn more ð