Skip to content
Accessible Astro Documentation

Accessible Astro Starter

Introduction

Accessible Astro Starter is a ready-to-use, SEO and accessibility-friendly blogging theme. It provides a solid foundation with numerous accessible components, Tailwind CSS integration, and example pages including a dynamic blog, 404 page, and MDX support.

GitHub RepositoryLive Demo

Key Features

  • Built on Astro 5.0
  • Tailwind CSS integration
  • Markdown and MDX support
  • Excellent Lighthouse scores
  • ESLint with strict accessibility settings
  • Prettier integration
  • View Transitions support

Accessibility Features

  • Semantic HTML landmarks (header, main, footer, nav, etc.)
  • Proper heading hierarchy
  • ARIA attributes for enhanced screen reader support
  • Keyboard-accessible navigation with dropdown support
  • Skip links for main menu and content
  • Dark mode with system preference detection
  • Focus indicators that work on all backgrounds
  • Reduced motion preferences support
  • Screen reader only text utilities

Components

The starter includes several pre-built accessible components:

  • Header with responsive navigation
  • Footer with customizable content
  • Skip links for keyboard users
  • Dark mode toggle
  • Responsive navigation toggle
  • SEO meta component
  • Dynamic blog pages with pagination
  • Custom 404 error page
  • And many more through the components package

Getting Started

  1. Clone the repository:
Terminal window
git clone https://github.com/markteekman/accessible-astro-starter.git
  1. Install dependencies:
Terminal window
npm install
  1. Start development server:
Terminal window
npm run dev

Available Commands

CommandAction
npm installInstall dependencies
npm run devStart dev server at localhost:4321
npm run buildBuild for production
npm run previewPreview production build

Project Structure

/
├── public/
├── src/
│   ├── assets/
│   │   └── scss/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── content/
└── package.json

Customization

Styling

The theme uses Tailwind CSS with additional SCSS utilities:

// Example custom styles
@layer base {
  :root {
    --color-primary: #4f46e5;
    --color-secondary: #7c3aed;
  }
}

Components

Extend or modify existing components in the src/components directory:

src/components/Header.astro
---
import Navigation from './Navigation.astro'
---


<header>
  <Navigation />
  <!-- Add your custom header content -->
</header>

Contributing

Contributions are welcome! You can help improve this starter by:

  1. Filing an issue
  2. Submitting a pull request
  3. Starting a discussion
  4. Supporting the project