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.

(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