An Accessible Starter Theme for Astro 4.0 including accessibility features such as landmarks, better focus-outline and skip-links navigation. Ships with Tailwind, Prettier and ESLint support.
(Accessibility) Features
- Astro 4.0
- 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
- View Transitions (⚠️ see astro-docs for accessibility considerations)