<h2>Overview</h2>
<p>Accessible Astro Components is a fantastic library designed specifically for developers creating inclusive web applications using Astro. The focus on accessibility is paramount, with each component adhering to the Web Content Accessibility Guidelines (WCAG) and ARIA best practices. This makes it an excellent choice for anyone looking to ensure that their applications are usable by everyone, regardless of ability. Moreover, the library strikes a perfect balance between performance and customization, making it not only functional but also adaptable to a wide range of project requirements.</p>
<p>With a commitment to modern web standards, Accessible Astro Components is built with complete TypeScript support, ensuring that developers have the tools they need for scalable and maintainable code. Its mobile-first design and robust features make it user-friendly for both developers and end-users alike.</p>
<h2>Features</h2>
<ul>
<li><strong>Accessible by Default</strong>: Each component is built following WCAG guidelines and ARIA best practices to ensure inclusivity.</li>
<li><strong>Modern CSS</strong>: Utilizes logical properties and modern selectors for a streamlined and flexible design.</li>
<li><strong>Performance Optimized</strong>: Components are designed with Core Web Vitals in mind, ensuring fast load times and smooth interactions.</li>
<li><strong>Responsive Design</strong>: Offers a mobile-first approach, ensuring accessibility across all devices with touch-friendly features.</li>
<li><strong>i18n Ready</strong>: Built with internationalization in mind, making it easy to adapt to different languages and locales.</li>
<li><strong>Dark Mode Support</strong>: Easily switch between light and dark themes to enhance user experience based on preferences.</li>
<li><strong>Keyboard Navigation</strong>: Full support for keyboard navigation with effective focus management for enhanced accessibility.</li>
<li><strong>Zero Dependencies</strong>: Pure Astro components help keep projects lightweight and easy to manage.</li>
</ul>


<h2>Overview</h2>
<p>The Accessible Astro Dashboard is an innovative and modern dashboard template designed with a strong emphasis on accessibility. Built using Astro and adhering to WCAG guidelines, it provides developers with an efficient admin interface that ensures inclusivity for all users. This template is not only responsive and user-friendly but also integrates seamlessly with Accessible Astro Components, making it a chase for anyone looking to create an accessible web application.</p>
<p>Equipped with a variety of example pages, authentication flows, and built-in accessibility features, the Accessible Astro Dashboard simplifies the process of building robust admin interfaces. It offers all the essential tools required to kickstart your project while ensuring a high standard of accessibility and user experience.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Responsive Navigation</strong>: The dashboard includes a keyboard-accessible navigation system, allowing easy movement through the interface with arrow keys and escape key support.</p>
</li>
<li>
<p><strong>Comprehensive Admin Pages</strong>: Features multiple example admin pages, including media management, messaging, product tracking, settings, and user management, streamlining project development.</p>
</li>
<li>
<p><strong>Authentication Flows</strong>: Comes with a login page leveraging localStorage for credentials management, complete with a separate layout and notification system for login issues.</p>
</li>
<li>
<p><strong>Accessible Components</strong>: Preinstalled with various components like Accordions, Modals, Notifications, and a unique 404 error page that can be easily customized to fit your project needs.</p>
</li>
<li>
<p><strong>Persisted User Preferences</strong>: Stores user menu width and dark mode preferences in localStorage, providing a consistent user experience during page reloads.</p>
</li>
<li>
<p><strong>Screen Reader Support</strong>: The template implements a <code>sr-only</code> utility class for screen reader text, enhancing accessibility for visually impaired users.</p>
</li>
</ul>


<h2>Overview</h2>
<p>The Accessible Astro Starter is an impressive template designed for developers who prioritize both accessibility and aesthetics in web design. Built on modern web standards and adhering to WCAG guidelines, this starter template offers a convenient way to create websites that are both inclusive and visually engaging. With numerous built-in features aimed at improving usability and ensuring compliance with accessibility norms, it sets a solid foundation for anyone looking to build a site that caters to all users.</p>
<p>What makes this starter template stand out is its combination of powerful tools and emphasis on best practices. From the seamless integration of Tailwind CSS to the implementation of enhanced typography with the Atkinson Hyperlegible font, every aspect has been carefully crafted to boost readability and user experience. Whether you're creating a blog, portfolio, or any other type of web application, this starter provides everything needed for a successful project.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Astro 5.7.5+ Compatibility:</strong> Optimized to work seamlessly with the latest version of Astro, ensuring you access cutting-edge features.</p>
</li>
<li>
<p><strong>Tailwind CSS 4 Support:</strong> Incorporates Tailwind CSS for rapid, responsive design and customization without compromising the overall aesthetics.</p>
</li>
<li>
<p><strong>TypeScript Integration:</strong> Allows for easier imports with path aliases, enhancing development efficiency.</p>
</li>
<li>
<p><strong>Strict Accessibility Settings:</strong> Utilize ESLint with accessibility-focused rules to maintain best practices in your code.</p>
</li>
<li>
<p><strong>Dynamic Blog and Portfolio Pages:</strong> Comes equipped with pre-built blog and portfolio layouts that include social sharing features, making content engagement easier.</p>
</li>
<li>
<p><strong>Modern OKLCH Color System:</strong> Automatically generates cohesive color palettes based on primary and secondary colors to improve visual consistency.</p>
</li>
<li>
<p><strong>Enhanced Readability:</strong> The inclusion of the Atkinson Hyperlegible font significantly improves text legibility, catering to users with visual impairments.</p>
</li>
</ul>


<h2>Overview:</h2>
<p>The Accessible Astro Components is a set of simple, easy to use front-end UI components designed for Astro. These components are used in the Accessible Astro Starter and Accessible Astro Dashboard themes and provide exemplary use cases. The themes also include dedicated components for keyboard accessibility and responsive navigation, as well as various utility classes, patterns, and primitives for design system purposes.</p>
<h2>Features:</h2>
<ul>
<li><strong>Accordion</strong>: Allows grouping of content into expandable headers, providing an easier scanning experience for users. It also includes some accessibility features such as keyboard navigation and screen reader support.</li>
<li><strong>Breadcrumbs</strong>: Helps users navigate back to previous pages or sections and provides support for screen reader users by indicating the current location in the website.</li>
<li><strong>Card</strong>: A component commonly used in groups, it includes accessibility features such as support for screen readers and touch devices, specifically designed for users with low accuracy.</li>
</ul>
<h2>Summary:</h2>
<p>The Accessible Astro Components is a collection of front-end UI components designed to be easy to use and accessible. It includes features such as accordions, breadcrumbs, and cards, each with their own set of accessibility considerations. Installation is simple, requiring only a single command. These components are used in the Accessible Astro Starter and Dashboard themes, providing exemplary use cases. Overall, the Accessible Astro Components aim to provide a seamless and accessible user experience for Astro applications.</p>


<h2>Overview:</h2>
<p>The Accessible Astro Dashboard is a theme built upon the Astro Static Site Builder. It includes various components and features designed to make the dashboard accessible and user-friendly. The theme provides example pages, admin pages, utility classes, and components from the Accessible Astro Components npm package. It also incorporates the Accessible Astro Icon package for different use cases.</p>
<h2>Features:</h2>
<ul>
<li><strong>Login page</strong>: Includes a login.astro page with an example login using local storage and a separate LoginLayout.astro layout. It also has an example login data and a warning notification for incorrect credentials.</li>
<li><strong>Dashboard example</strong>: Contains a dashboard example in the index.astro page using the DefaultLayout.astro layout.</li>
<li><strong>Admin pages</strong>: Provides examples of admin pages such as media.astro, messages.astro, products.astro, settings.astro, and users.astro.</li>
<li><strong>Media component</strong>: Includes a Media.astro component for images, used on the media.astro page.</li>
<li><strong>Pagination component</strong>: Contains a Pagination.astro component for paginating results, used on the media.astro page.</li>
<li><strong>Dashboard Widget component</strong>: Serves as an example for the dashboard on index.astro.</li>
<li><strong>Empty State component</strong>: Displays an EmptyState.astro component on pages that don't have any data yet.</li>
<li><strong>Login Form component</strong>: Offers a LoginForm.astro component with a basic accessible login form and form controls.</li>
<li><strong>Skip Links component</strong>: Provides a SkipLinks.astro component to skip to either the main menu or the main content.</li>
<li><strong>Navigation component</strong>: Includes a Navigation.astro component with keyboard accessible navigation (arrow keys, escape key). It has a comprehensive sidebar navigation on desktop with the option to expand or collapse. The users menu width preference is stored in local storage for preservation during page reloads. The navigation automatically switches to an accessible mobile navigation for viewport widths below the medium breakpoint.</li>
<li><strong>Responsive Toggle component</strong>: Contains a ResponsiveToggle.astro component with an accessible responsive toggle button for the mobile navigation.</li>
<li><strong>Dark Mode component</strong>: Provides a DarkMode.astro component toggle with an accessible button that saves the user's preference in local storage.</li>
<li><strong>Custom 404 page</strong>: Includes a 404.astro page that provides a custom 404 error page that can be adjusted as needed.</li>
<li><strong>Utilities</strong>: The theme incorporates the sr-only utility class for screen reader-only text content and supports the prefers-reduced-motion feature to disable animations for users with this preference.</li>
<li><strong>Accessible Astro Components package</strong>: Comes preinstalled with extra components such as Accordions, Modals, and Notifications.</li>
<li><strong>Accessible Astro Icon package</strong>: Preinstalled package that offers various icons for different use cases.</li>
</ul>


<h2>Overview</h2>
<p>Accessible Astro Starter is a blogging theme designed to be ready to use, search engine optimized, and accessible. It provides a solid base for accessibility and includes many accessible components to build different page types. The theme utilizes Tailwind CSS for faster development and includes example pages such as a dynamic blog, 404 error page, and support for Markdown and MDX. This theme aims to help developers build projects faster while prioritizing accessibility.</p>
<h2>Features</h2>
<ul>
<li>Tailwind CSS support for faster development</li>
<li>Prettier integration with prettier-plugin-astro and prettier-plugin-tailwind</li>
<li>ESLint integration with strict accessibility settings for eslint-plugin-jsx-a11y</li>
<li>Markdown and MDX support with examples included</li>
<li>Uses the astro-icon package for icons</li>
<li>Excellent Lighthouse/PageSpeed scores</li>
<li>Accessible landmarks such as header, main, footer, section, and nav</li>
<li>Outline focus indicator for dark and light backgrounds</li>
<li>Several aria attributes for better screen reader experience</li>
<li>Dynamic routes with examples for a basic blog with breadcrumbs and pagination</li>
<li>Customizable 404 error page</li>
<li>Included header and footer components</li>
<li>Skip links component for quick navigation to main menu or main content</li>
<li>Keyboard accessible navigation with dropdowns (arrow keys, escape key)</li>
</ul>


Incluud

Accessible Astro Components

Accessible Astro Dashboard

Accessible Astro Starter

Accessible Astro Components

Accessible Astro Dashboard

Accessible Astro Starter