LogoTemplate0

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.

Introduction

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)

Image for Accessible Astro Starter(blog astro template) on template0.com

Information

  • Publisher
    Justin3go
  • Websitegithub.com
  • Published date2024/12/12

Categories

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates