Introduction

Accessible Astro Starter is a user-friendly, SEO-optimized, and accessibility-focused theme for Astro 4.0. It provides a solid foundation for building websites with a strong emphasis on accessibility. The theme includes various pre-built accessible components, Tailwind CSS integration, and example pages such as a dynamic blog, 404 page, and Markdown/MDX support. It's designed to help developers quickly create accessible and performant websites.

Main Features

• Built with Astro 4.0 and Tailwind CSS
• Accessibility features including landmarks, skip links, and keyboard navigation
• SEO-friendly with customizable meta tags
• Dark mode toggle with system preference detection
• Responsive design with mobile-friendly navigation
• Dynamic routing for blog posts and pages
• Markdown and MDX support
• Integration with Prettier and ESLint for code quality
• High performance with excellent Lighthouse scores
• Various pre-built accessible components (accordions, modals, pagination, etc.)
• View Transitions support (with accessibility considerations)

Installation Steps

1. Clone the repository to your local machine.
2. Navigate to the project directory in your terminal.
3. Run the following command to install dependencies:

   npm install
   

4. Start the development server with:

   npm run dev
   

5. Open your browser and visit http://localhost:4321 to see the site.

Usage Instructions

1. Customize the src/pages directory to add or modify pages.
2. Use the pre-built components in src/components to construct your pages.
3. Modify the DefaultLayout.astro in src/layouts to change the overall page structure.
4. Update the Header.astro and Footer.astro components to match your site's design.
5. Customize the color scheme and typography in the Tailwind configuration file.
6. Add your own blog posts in the src/pages/blog directory using Markdown or MDX.
7. Adjust the SiteMeta.astro component to set appropriate SEO meta tags for each page.
8. Use the utility classes in src/assets/scss/base for consistent styling.
9. Implement the DarkMode.astro component to add a dark mode toggle to your site.
10. Leverage the ResponsiveToggle.astro for creating a mobile-friendly navigation menu.

Important Notes

1. Ensure all custom components and content maintain accessibility standards.

2. Test the website thoroughly with screen readers and keyboard navigation.

3. Use the provided ESLint configuration to catch potential accessibility issues in your code.

4. When adding new pages, remember to update the navigation component accordingly.

5. Regularly update Astro and other dependencies to benefit from the latest features and security patches.

6. Be mindful of accessibility considerations when using View Transitions.

7. Utilize the .sr-only utility class for content that should only be visible to screen readers.

8. Consider the prefers-reduced-motion setting when implementing animations.

9. Customize the 404 error page (404.astro) to match your site's design and provide helpful information.

10. Leverage the dynamic routing capabilities for creating additional content types beyond blog posts if needed.