Next

README.md

@@ -4,7 +4,7 @@
 
 ![accessible-astro-starter](https://github.com/user-attachments/assets/01630a5b-10bb-4765-a291-74725fedc04f)
 
-A ready-to-use, SEO and accessibility-focused Astro starter template. Built with modern web standards and WCAG guidelines in mind, it provides a solid foundation for creating inclusive websites. Features Tailwind CSS 4 integration, comprehensive component library, color contrast checker, and typography with Atkinson Hyperlegible font for improved readability. Includes dynamic blog/portfolio pages with social sharing, and full MDX support.
+A ready-to-use, SEO and accessibility-focused Astro starter template. Built with modern web standards, WCAG 2.2 AA guidelines, and European Accessibility Act (EAA) compliance in mind, it provides a solid foundation for creating inclusive websites. Features Tailwind CSS 4 integration, comprehensive component library with enhanced form validation, color contrast checker, and typography with Atkinson Hyperlegible font for improved readability. Includes dynamic blog/portfolio pages with social sharing, contact forms, and full MDX support.
 
 [![LIVE DEMO](https://img.shields.io/badge/LIVE_DEMO-4ECCA3?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro-starter.incluud.dev/)  
 [![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro.incluud.dev/)  
@@ -16,15 +16,16 @@ A ready-to-use, SEO and accessibility-focused Astro starter template. Built with
 
 ## (Accessibility) Features
 
-- Astro 5.7.5+
-- Tailwind CSS 4 support
-- TypeScript integration with path aliases for easier imports
+- Astro 5.13.0+
+- Tailwind CSS 4.1+ support
+- TypeScript integration with path aliases for easier imports and content collections 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 comprehensive examples and components
 - Modern OKLCH color system with automatic palette generation from primary/secondary colors
 - Atkinson Hyperlegible font for improved readability and accessibility
 - Lucide icon set via `astro-icon` for consistent, friendly icons
+- Semantic HTML structure with `Button`, `Link` and `Heading` components
 - Excellent Lighthouse/PageSpeed scores
 - Accessible landmarks such as `header`, `main`, `footer`, `section` and `nav`
 - Outline focus indicator which works on dark and light backgrounds
@@ -40,10 +41,16 @@ A ready-to-use, SEO and accessibility-focused Astro starter template. Built with
 - `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
-- Components including `ColorContrast.astro`, `BlockQuote.astro`, `BreakoutImage.astro`, `ExternalLink.astro`, `Logo.astro`, `SocialShares.astro`, and `PageHeader.astro`
+- Components including `ColorContrast.astro`, `BlockQuote.astro`, `BreakoutImage.astro`, `Logo.astro`, `SocialShares.astro`, `PageHeader.astro`, `FeaturedPosts.astro`, and `FeaturedProjects.astro`
+- Enhanced form components with comprehensive validation: `Form`, `Input`, `Textarea`, `Checkbox`, `Radio`, and `Fieldset` with WCAG 2.2 compliance
+- Automatic form validation with custom patterns, error handling, and screen reader support
 - Blog and portfolio pages with featured images, author details, social sharing, and breakout images
+- Contact page with comprehensive form validation showcase and accessibility demonstrations
+- Thank-you page for form submissions with interactive feedback
 - Accessibility Statement template page
 - Color Contrast Checker interactive page
+- Comprehensive sitemap page with organized navigation and automatic XML sitemap generation via `@astrojs/sitemap`
+- Enhanced accessible-components showcase page with expanded component demonstrations
 - Smooth micro-interactions and animations on hover, open and close states (respecting reduced motion preferences)
 - Comprehensive SCSS utility classes
 - CSS with logical properties and custom properties
@@ -91,6 +98,7 @@ We want to express our heartfelt gratitude to everyone who contributes to making
 
 - **The Astro team** for creating an amazing static site generator and the wonderful Starlight theme
 - **Our contributors** who dedicate their time and expertise to improve these tools
+- [**Niek Derksen**](https://niekderksen.nl) for conducting comprehensive accessibility audits to ensure WCAG compliance
 - **Our sponsors** who help make this project sustainable
 - **The web community** for embracing and promoting web accessibility
 - **You, the developer** for choosing to make your projects more accessible

astro.config.mjs

@@ -5,11 +5,13 @@ import icon from 'astro-icon'
 import tailwindcss from '@tailwindcss/vite'
 import { fileURLToPath } from 'url'
 
+import sitemap from '@astrojs/sitemap';
+
 // https://astro.build/config
 export default defineConfig({
   compressHTML: true,
   site: 'https://accessible-astro-starter.incluud.dev',
-  integrations: [mdx(), icon(), compress()],
+  integrations: [mdx(), icon(), compress(), sitemap()],
   vite: {
     css: {
       preprocessorOptions: {
@@ -34,4 +36,4 @@ export default defineConfig({
       },
     },
   },
-})
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "author": "Incluud",
   "license": "MIT",
   "type": "module",
@@ -34,32 +34,34 @@
     "url": "https://github.com/incluud/accessible-astro-starter/issues"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^4.3.0",
+    "@astrojs/mdx": "^4.3.5",
     "@astrojs/partytown": "^2.1.4",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.27.0",
-    "@iconify-json/lucide": "^1.2.44",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "astro": "^5.8.0",
+    "@eslint/js": "^9.35.0",
+    "@iconify-json/lucide": "^1.2.66",
+    "@types/sanitize-html": "^2.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.43.0",
+    "@typescript-eslint/parser": "^8.43.0",
+    "astro": "^5.13.7",
     "astro-compress": "^2.3.8",
     "astro-eslint-parser": "^1.2.2",
     "astro-icon": "^1.1.5",
-    "eslint": "^9.27.0",
+    "eslint": "^9.35.0",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "globals": "^16.1.0",
-    "prettier": "^3.5.3",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "sanitize-html": "^2.17.0",
-    "sass": "^1.89.0",
-    "svgo": "^3.3.2",
-    "tailwindcss": "^4.1.7"
+    "sass": "^1.92.1",
+    "svgo": "^4.0.0",
+    "tailwindcss": "^4.1.13"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.7",
-    "accessible-astro-components": "^4.1.2"
+    "@astrojs/sitemap": "^3.5.1",
+    "@tailwindcss/vite": "^4.1.13",
+    "accessible-astro-components": "^5.0.0"
   }
 }

src/assets/scss/base/_breakpoint.scss

@@ -6,7 +6,7 @@ $breakpoints: (
   'l': 1024px,
   'xl': 1280px,
   '2xl': 1536px,
-  'nav': 900px,
+  'nav': 1000px,
 ) !default;
 
 @mixin breakpoint($breakpoint) {

src/components/BlockQuote.astro

@@ -17,9 +17,9 @@ const { author } = Astro.props
 
 <blockquote class="border-primary-500 border-l-4 pl-4">
   <div>
-    <Icon name="lucide:quote" size="2rem" />
+    <Icon aria-hidden="true" name="lucide:quote" size="2rem" />
     <slot />
-    <Icon name="lucide:quote" size="2rem" />
+    <Icon aria-hidden="true" name="lucide:quote" size="2rem" />
   </div>
   {author && <cite class="block text-sm font-medium">{author}</cite>}
 </blockquote>

src/components/CallToAction.astro

@@ -1,4 +1,5 @@
 ---
+import { Heading, Link } from 'accessible-astro-components'
 import { Icon } from 'astro-icon/components'
 
 /**
@@ -33,11 +34,11 @@ const {
 
 <div class="container">
   <div class="call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl px-12 py-20 md:px-24">
-    <h2 class="text-center text-3xl md:text-6xl">{title}</h2>
-    <a href={link} class="text-center text-2xl">
+    <Heading level="h2" class="text-center text-3xl md:text-6xl">{title}</Heading>
+    <Link href={link} isButton size="lg" animateOnHover animationType="nudge">
       {linkText}
-      <Icon name="lucide:arrow-right" />
-    </a>
+      <Icon aria-hidden="true" name="lucide:rocket" size="1.5rem" />
+    </Link>
   </div>
 </div>
 
@@ -51,36 +52,6 @@ const {
       light-dark(var(--color-primary-100), var(--color-secondary-100)) 25%,
       light-dark(var(--color-secondary-100), var(--color-primary-200))
     );
-
-    color: var(--color-neutral-900);
-  }
-
-  a,
-  a:visited {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2xs);
-    border: 3px solid var(--color-neutral-900);
-    border-radius: var(--radius-s);
-    padding: var(--space-s);
     color: var(--color-neutral-900);
-    font-weight: bold;
-    text-decoration: none;
-
-    @include text-decoration(transparent, currentColor);
-
-    [data-icon] {
-      transition: translate var(--animation-speed-fast) var(--cubic-bezier);
-    }
-
-    &:where(:hover, :focus) {
-      background-color: var(--color-neutral-900);
-      color: var(--color-neutral-100);
-      text-decoration: underline;
-
-      [data-icon] {
-        translate: 5px 0;
-      }
-    }
   }
 </style>

src/components/ColorContrast.astro

@@ -5,7 +5,7 @@ interface Props {
 
 const { class: className } = Astro.props
 
-import { Tabs, TabsList, TabsTab, TabsPanel } from 'accessible-astro-components'
+import { Heading, Tabs, TabsList, TabsTab, TabsPanel } from 'accessible-astro-components'
 
 interface ColorGroup {
   name: string
@@ -65,13 +65,13 @@ const themes: Theme[] = [
           <TabsPanel id={`${theme.id}-panel`} labelledby={theme.id} selected={index === 0}>
             <div class="theme-section">
               <div class="theme-header">
-                <h2>{theme.name}</h2>
+                <Heading level="h2">{theme.name}</Heading>
                 <p>{theme.description}</p>
               </div>
               <div class="color-categories">
                 {/* Three column layout for color categories */}
                 <div class="color-category">
-                  <h3>Primary Colors</h3>
+                  <Heading level="h3">Primary Colors</Heading>
                   <div class="colors">
                     {colorGroups[0].values.map((value) => (
                       <div
@@ -90,7 +90,7 @@ const themes: Theme[] = [
                 </div>
 
                 <div class="color-category">
-                  <h3>Secondary Colors</h3>
+                  <Heading level="h3">Secondary Colors</Heading>
                   <div class="colors">
                     {colorGroups[1].values.map((value) => (
                       <div
@@ -109,7 +109,7 @@ const themes: Theme[] = [
                 </div>
 
                 <div class="color-category">
-                  <h3>Neutral Colors</h3>
+                  <Heading level="h3">Neutral Colors</Heading>
                   <div class="colors">
                     {colorGroups[2].values.map((value) => (
                       <div
@@ -274,7 +274,8 @@ const themes: Theme[] = [
     margin-bottom: var(--space-m);
   }
 
-  .theme-header h2 {
+  .theme-header h2,
+  .theme-header h3 {
     margin-bottom: var(--space-xs);
   }
 

src/components/Feature.astro

@@ -1,4 +1,5 @@
 ---
+import { Heading } from 'accessible-astro-components'
 import { Icon } from 'astro-icon/components'
 
 /**
@@ -21,9 +22,9 @@ const { icon = 'mdi:rocket', title = 'Title' }: Props = Astro.props
 ---
 
 <div class="feature flex flex-col gap-4">
-  <Icon name={icon} />
+  <Icon aria-hidden="true" name={icon} />
   <div class="content">
-    <h3 class="text-2xl font-bold">{title}</h3>
+    <Heading level="h3" size="h6" class="mb-2">{title}</Heading>
     <p>
       <slot>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, corporis.</slot>
     </p>