Image Gallery

Accessible Astro Starter

By markteekman

An Accessible Starter Theme for Astro including accessiblity features such as landmarks, better focus-outline and skip-links navigation.

The Accessible Astro Starter is designed to help you build your project faster and provide a solid base for accessibility!

The theme includes some dedicated accessible components (such as a keyboard accessible and responsive navigation) and several components provided by the Accessible Astro Components package.

The theme also includes example pages, a blog with dynamic routes, a custom 404 page and many Design System utility classes, patterns and primitives (such as grids, buttons, lists, spacings, sizes and more).

Accessibility features

  • Semantic HTML and accessible landmarks
  • Outline focus indicator which works on dark and light backgrounds
  • ARIA attributes which provide a better experience for screen reader users
  • Visually hidden "Skip to content" link
  • Navigation menu with full keyboard support and accessible mobile navigation
  • Dark mode support with a user toggle and default support for a user's preferred color scheme
  • Breadcrumbs, pagination, header, and footer components
  • Automatically disables animations for users that have this preference turned on

Extra features

  • SEO Component for setting page-specific metadata
  • Preconfigured with dynamic routes for a basic blog, with breadcrumbs and pagination
  • Custom 404 error page which you can adjust to your needs
  • Accessible Astro Components package comes preinstalled with extra components such as Accordions, Modals and Notifications
  • The Astro Icon package is also preinstalled which can be applied to different use cases

Features

  • a11y
  • blog
  • darkmode

Links