diff --git a/README.md b/README.md index 0756d559..3e2a071e 100644 --- a/README.md +++ b/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 diff --git a/astro.config.mjs b/astro.config.mjs index 94a58dc9..2446eaf0 100644 --- a/astro.config.mjs +++ b/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({ }, }, }, -}) +}) \ No newline at end of file diff --git a/package.json b/package.json index dffcaba0..361c7898 100644 --- a/package.json +++ b/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" } } diff --git a/public/social-preview-image.png b/public/social-preview-image.png index 51fa2967..af4111bd 100644 Binary files a/public/social-preview-image.png and b/public/social-preview-image.png differ diff --git a/src/assets/scss/base/_breakpoint.scss b/src/assets/scss/base/_breakpoint.scss index 1fcbe78a..2c2c64f2 100644 --- a/src/assets/scss/base/_breakpoint.scss +++ b/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) { diff --git a/src/components/BlockQuote.astro b/src/components/BlockQuote.astro index ec1a7c3b..1317ca6f 100644 --- a/src/components/BlockQuote.astro +++ b/src/components/BlockQuote.astro @@ -17,9 +17,9 @@ const { author } = Astro.props
- +
{author && {author}}
diff --git a/src/components/CallToAction.astro b/src/components/CallToAction.astro index 5b96da26..5526b999 100644 --- a/src/components/CallToAction.astro +++ b/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 {
-

{title}

- + {title} + {linkText} - - +
@@ -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; - } - } } diff --git a/src/components/ColorContrast.astro b/src/components/ColorContrast.astro index 68ea9323..296feb1a 100644 --- a/src/components/ColorContrast.astro +++ b/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[] = [
-

{theme.name}

+ {theme.name}

{theme.description}

{/* Three column layout for color categories */}
-

Primary Colors

+ Primary Colors
{colorGroups[0].values.map((value) => (
-

Secondary Colors

+ Secondary Colors
{colorGroups[1].values.map((value) => (
-

Neutral Colors

+ Neutral Colors
{colorGroups[2].values.map((value) => (
- - - Opens in a new tab - - - diff --git a/src/components/Feature.astro b/src/components/Feature.astro index 3794e311..7e7e9792 100644 --- a/src/components/Feature.astro +++ b/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 ---
- +
diff --git a/src/components/Logo.astro b/src/components/Logo.astro index 2c8eaf4b..c0d0ee43 100644 --- a/src/components/Logo.astro +++ b/src/components/Logo.astro @@ -1,4 +1,5 @@ --- +import { Link } from 'accessible-astro-components' import { Image } from 'astro:assets' import logo from '../assets/img/logo.svg' @@ -18,13 +19,7 @@ interface Props { const { loading = 'eager' }: Props = Astro.props --- - + Accessible Astro Logo Accessible Astro - - - + diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro index 6c24783d..16256d1d 100644 --- a/src/components/PageHeader.astro +++ b/src/components/PageHeader.astro @@ -1,5 +1,5 @@ --- -import { Avatar, Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components' +import { Avatar, Breadcrumbs, BreadcrumbsItem, Heading } from 'accessible-astro-components' import { Image } from 'astro:assets' import sanitizeHtml from 'sanitize-html' @@ -105,7 +105,7 @@ const sanitizedSubtitle: string = subtitle
) } -

{title}

+ {title} {sanitizedSubtitle &&

} { author && ( diff --git a/src/components/SocialShares.astro b/src/components/SocialShares.astro index 66e46dae..e64a9653 100644 --- a/src/components/SocialShares.astro +++ b/src/components/SocialShares.astro @@ -1,4 +1,5 @@ --- +import { Link } from 'accessible-astro-components' import { Icon } from 'astro-icon/components' /** @@ -17,31 +18,44 @@ interface Props { const { url = Astro.url.href } = Astro.props --- -

diff --git a/src/content.config.mjs b/src/content.config.ts similarity index 100% rename from src/content.config.mjs rename to src/content.config.ts diff --git a/src/content/projects/project-02.mdx b/src/content/projects/project-02.mdx index 4dd2ae21..0d13643e 100644 --- a/src/content/projects/project-02.mdx +++ b/src/content/projects/project-02.mdx @@ -8,6 +8,7 @@ description: An AI-powered real-time sign language translation system that enabl Sign Language Bridge revolutionizes communication for the deaf community by providing real-time translation between sign language and spoken/written language. Using advanced computer vision and natural language processing, the system captures sign language gestures and converts them into text or speech, while also translating spoken words into animated sign language. +import BlockQuote from '@components/BlockQuote.astro' import BreakoutImage from '@components/BreakoutImage.astro' import { Image } from 'astro:assets' @@ -52,9 +53,10 @@ The biggest hurdle was developing a system that could accurately capture and int ## Testimonial -"Sign Language Bridge has transformed how I communicate with my hearing colleagues. It's like having a skilled interpreter available 24/7, giving me true independence in professional settings." - -- David Chen, Software Engineer +
+ Sign Language Bridge has transformed how I communicate with my hearing colleagues. It's like having a skilled + interpreter available 24/7, giving me true independence in professional settings. +
diff --git a/src/content/projects/project-03.mdx b/src/content/projects/project-03.mdx index 58e8497a..f8251328 100644 --- a/src/content/projects/project-03.mdx +++ b/src/content/projects/project-03.mdx @@ -8,6 +8,7 @@ description: A comprehensive web security solution that ensures both robust prot AccessGuard is a revolutionary web security platform that combines enterprise-grade protection with built-in accessibility compliance checking. The system ensures websites remain secure while maintaining full accessibility, automatically detecting and suggesting fixes for WCAG violations while protecting against security threats. +import BlockQuote from '@components/BlockQuote.astro' import BreakoutImage from '@components/BreakoutImage.astro' import { Image } from 'astro:assets' @@ -52,9 +53,10 @@ The primary challenge was implementing security measures that wouldn't interfere ## Testimonial -"AccessGuard has transformed how we approach web security. We no longer have to choose between robust security and accessibility - we get both in one solution, and our compliance scores have never been better." - -- Lisa Chen, Director of Digital Accessibility, Global Tech Solutions +
+ AccessGuard has transformed how we approach web security. We no longer have to choose between robust security and + accessibility - we get both in one solution, and our compliance scores have never been better. +
diff --git a/src/content/projects/project-04.mdx b/src/content/projects/project-04.mdx index e047c751..de7a61af 100644 --- a/src/content/projects/project-04.mdx +++ b/src/content/projects/project-04.mdx @@ -8,6 +8,7 @@ description: An inclusive e-learning platform that adapts to various learning di Accessible Learning Hub transforms online education by making it truly inclusive for all learners. The platform automatically adapts content presentation based on individual needs, supporting dyslexia, ADHD, visual impairments, and other learning differences through AI-driven personalization. +import BlockQuote from '@components/BlockQuote.astro' import BreakoutImage from '@components/BreakoutImage.astro' import { Image } from 'astro:assets' @@ -52,9 +53,10 @@ The biggest challenge was creating a system that could dynamically adjust conten ## Testimonial -"Accessible Learning Hub has revolutionized how our students with learning differences engage with online content. The personalized adaptations have dramatically improved both comprehension and confidence." - -- Prof. Helen Martinez, Director of Special Education +
+ Accessible Learning Hub has revolutionized how our students with learning differences engage with online content. The + personalized adaptations have dramatically improved both comprehension and confidence. +
diff --git a/src/content/projects/project-05.mdx b/src/content/projects/project-05.mdx index bb9b8ca5..32793887 100644 --- a/src/content/projects/project-05.mdx +++ b/src/content/projects/project-05.mdx @@ -8,6 +8,7 @@ description: A fully accessible financial management platform that makes banking FinanceForAll revolutionizes personal banking by making financial tools accessible to everyone. The platform provides screen-reader optimized interfaces, keyboard-only navigation, and simplified layouts for cognitive accessibility, ensuring equal access to banking, investment, and financial planning tools. +import BlockQuote from '@components/BlockQuote.astro' import BreakoutImage from '@components/BreakoutImage.astro' import { Image } from 'astro:assets' @@ -52,9 +53,10 @@ The primary challenge was creating complex financial interfaces that remained fu ## Testimonial -"FinanceForAll has given me true financial independence. As a blind person, I can now manage my investments and banking with the same ease as anyone else. The accessible charts and financial data are game-changing." - -- James Wu, Software Developer +
+ FinanceForAll has given me true financial independence. As a blind person, I can now manage my investments and banking + with the same ease as anyone else. The accessible charts and financial data are game-changing. +
diff --git a/src/content/projects/project-06.mdx b/src/content/projects/project-06.mdx index e7ccef20..b89811ed 100644 --- a/src/content/projects/project-06.mdx +++ b/src/content/projects/project-06.mdx @@ -8,6 +8,7 @@ description: An accessible healthcare management system designed for patients wi HealthAccess revolutionizes healthcare management by making medical information and services accessible to all patients. The platform provides multiple interaction methods including voice commands, high-contrast modes, and simplified interfaces, ensuring patients with disabilities can independently manage their healthcare. +import BlockQuote from '@components/BlockQuote.astro' import BreakoutImage from '@components/BreakoutImage.astro' import { Image } from 'astro:assets' @@ -52,9 +53,10 @@ The biggest challenge was creating an interface that worked seamlessly with vari ## Testimonial -"HealthAccess has transformed how I manage my medical care. As someone with limited mobility, I can now schedule appointments, review test results, and communicate with my doctors independently." - -- Sarah Chen, Patient Advocate +
+ HealthAccess has transformed how I manage my medical care. As someone with limited mobility, I can now schedule + appointments, review test results, and communicate with my doctors independently. +
diff --git a/src/content/projects/project-07.mdx b/src/content/projects/project-07.mdx index 346f3cb2..a5ebb1e3 100644 --- a/src/content/projects/project-07.mdx +++ b/src/content/projects/project-07.mdx @@ -8,6 +8,7 @@ description: An inclusive smart home automation system that enables people with SmartHome Access revolutionizes home automation by making it truly accessible for people with mobility impairments. The system combines voice control, eye tracking, and adaptive switches to provide multiple ways of controlling home environments, from lighting and temperature to doors and appliances. +import BlockQuote from '@components/BlockQuote.astro' import BreakoutImage from '@components/BreakoutImage.astro' import { Image } from 'astro:assets' @@ -52,9 +53,10 @@ The biggest hurdle was creating a reliable multi-modal control system that could ## Testimonial -"SmartHome Access has given me back my independence at home. I can control everything in my environment without assistance, and the system adapts perfectly to my changing needs throughout the day." - -- Michael Torres, Accessibility Advocate +
+ SmartHome Access has given me back my independence at home. I can control everything in my environment without + assistance, and the system adapts perfectly to my changing needs throughout the day. +
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro index b0b45475..3d207278 100644 --- a/src/layouts/DefaultLayout.astro +++ b/src/layouts/DefaultLayout.astro @@ -36,6 +36,8 @@ const {