Accessible Astro Starter

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 integration, comprehensive component library, and example pages including a dynamic blog, 404, and MDX support.

     

Our mission

Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.

(Accessibility) Features

• Astro 5+
• Tailwind CSS support
• 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 examples included in the theme
• Uses the awesome astro-icon package for the 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 included in the DefaultLayout.astro layout
• Footer.astro component included in the DefaultLayout.astro layout
• SkipLinks.astro component to skip to either the main menu or the main content
• Navigation.astro component with keyboard accessible (dropdown) navigation (arrow keys, escape key)
• ResponsiveToggle.astro component with an accessible responsive toggle button for the mobile navigation
• 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
• Ships with many components such as Accordions, Breadcrumbs, Modals, Pagination and many more
• A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in src/assets/scss/base
• Astro’s View Transitions

Getting started

Clone this theme locally and run any of the following commands in your terminal:

Command	Action
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

Accessible Astro projects

• Accessible Astro Starter: Fully accessible starter for kickstarting Astro projects, with Tailwind.
• Accessible Astro Components: Library of reusable, accessible components build for Astro.
• Accessible Astro Dashboard: User-friendly dashboard interface with a login screen and widgets.
• Accessible Astro Docs: Comprehensive documentation for all Accessible Astro projects.

Check out our roadmap to see what’s coming next!

Contributing

We welcome contributions to improve the documentation! You can help by:

1. Filing an issue
2. Submitting a pull request
3. Starting a discussion
4. Supporting on Open Collective

Support this project

Your support helps us cover basic costs and continue building accessible solutions for the Astro ecosystem. By becoming a sponsor, you’re not just supporting code – you’re helping create a more inclusive web for everyone. Every contribution, big or small, helps maintain and improve these accessibility-focused tools.

Together we make a difference

We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:

• The Astro team for creating an amazing static site generator and the wonderful Starlight theme
• Our contributors who dedicate their time and expertise to improve these tools
• Our sponsors who help make this project sustainable
• The web community for embracing and promoting web accessibility
• You, the developer for choosing to make your projects more accessible

Together, we’re not just building documentation or components – we’re creating a more inclusive and accessible web for everyone. Every contribution, whether it’s code, documentation, bug reports, or feedback, helps move us closer to this goal. ✨

Remember: Accessibility is not a feature, it’s a fundamental right. Thank you for being part of this journey!