Accessible Astro Starter

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)