accessible-astro-starter

机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

可访问的 Astro 启动模板

一个可直接使用、专注于 SEO 和可访问性的 Astro 启动模板。基于现代网页标准、WCAG 2.2 AA 指南以及欧洲可访问性法案（EAA）兼容性构建，为创建包容性网站提供坚实基础。特色包括 Tailwind CSS 4 集成、包含增强表单验证的全面组件库、色彩对比检查器以及使用 Atkinson Hyperlegible 字体的排版以提高可读性。包含强大的命令启动器以实现键盘操作导航、暗模式、高对比度和减少动画偏好切换，以及带有社交分享、联系表单和完整 MDX 支持的动态博客/作品集页面。

我们的使命

为开发者提供可访问、易于使用的组件，使构建包容性网页应用更加简单和快速，同时不影响自定义或性能。

（无障碍）功能

• Astro 6.1.1
• Tailwind CSS 4.1 支持
• TypeScript 集成，带路径别名以便于导入和内容集合支持
• Prettier 集成与 prettier-plugin-astro 和 prettier-plugin-tailwind
• ESLint 集成，带严格的可访问性设置用于 eslint-plugin-jsx-a11y
• Markdown 和 MDX 支持，提供全面的示例和组件
• 现代 OKLCH 色彩系统，从主/次色自动生成调色板
• Atkinson Hyperlegible 字体，提高可读性和可访问性
• 通过 astro-icon 提供 Lucide 图标集，实现一致、友好的图标
• 带有 Button、Link 和 Heading 组件的语义化 HTML 结构
• 优秀的 Lighthouse/PageSpeed 分数
• 可访问的地标，如 header、main、footer、section 和 nav
• 轮廓焦点指示，适用于深色和浅色背景
• 多个 aria 属性，为屏幕阅读器用户提供更好的体验
• [...page].astro 和 [post].astro 展示动态路由用法，并提供带面包屑和分页的基础博客
• 404.astro 提供可自定义的 404 错误页面，可根据需求调整
• Header.astro 组件，优化了可访问性和设计
• Footer.astro 组件，包含信息内容和链接
• SkipLinks.astro 组件，可跳转到主菜单或主体内容
• Navigation.astro 组件，带键盘可访问（下拉）导航，并提供高亮菜单项选项
• ResponsiveToggle.astro 组件，具备可访问的响应式切换功能
• 支持系统偏好的暗模式、高对比度和减少动画的偏好切换
• ColorContrast.astro 组件，用于增强视觉清晰度并符合 WCAG 标准
• 内置命令启动器，支持键盘导航（Cmd/Ctrl K），可快速访问偏好设置和导航
• SiteMeta.astro SEO 组件，用于在不同页面上设置自定义元数据
• .sr-only 实用类，仅供屏幕阅读器访问的文本内容（视觉上隐藏文本）
• prefers-reduced-motion 禁用动画，以支持已启用此偏好的用户
• 组件包括 ColorContrast.astro、BlockQuote.astro、BreakoutImage.astro、Logo.astro、SocialShares.astro、PageHeader.astro、FeaturedPosts.astro 和 FeaturedProjects.astro
• 增强的表单组件，具备全面的验证：Form、Input、Textarea、Checkbox、Radio 和 Fieldset，符合 WCAG 2.2 标准
• 带自定义模式、错误处理和屏幕阅读器支持的自动表单验证
• 博客和作品集页面，包含特色图像、作者信息、社交分享及突出显示图像
• 联系页面，展示全面表单验证和可访问性演示
• 表单提交的感谢页面，提供交互反馈
• 无障碍声明模板页面
• 颜色对比检查互动页面
• 全面网站地图页面，具备组织良好的导航，并通过 @astrojs/sitemap 自动生成 XML 网站地图
• 增强的可访问组件展示页面，扩展组件演示
• 在悬停、打开和关闭状态下的平滑微交互和动画（尊重减少动画偏好）
• 全面的 SCSS 实用类
• 使用逻辑属性和自定义属性的 CSS
• 可访问的按钮和超链接样式，具有清晰的焦点状态
• 为键盘快捷键文档设计的 <kbd> 元素样式

入门指南

在本地克隆此主题，并在终端中运行以下任何命令：

使用 CLI 创建项目

你现在可以使用 create CLI 直接从这个起始模板生成项目：

npm create accessible-astro-starter@latest

CLI 会引导你完成：

• 项目目录
• 网站名称
• 预设选择（full、blog、portfolio、minimal、barebones）
• 是否保留 Accessible Astro 启动器

生成的项目总是去除仅供贡献者使用的工具（工作区、CI 配置、变更日志配置），并生成一个简化的 astro.config.mjs，以适应所选择的预设。

无障碍 Astro 生态系统

Accessible Astro 生态系统是由一系列项目组成，旨在帮助你构建可访问的 web 应用程序。它包括：

• Accessible Astro Starter：完整可访问的入门项目，用于快速启动 Astro 项目，搭配 Tailwind。
• Accessible Astro Components：为 Astro 构建的可重用可访问组件库。
• Accessible Astro Dashboard：用户友好的仪表板界面，带有登录屏幕和小部件。
• Accessible Astro Launcher：Astro 项目的命令面板/启动器组件。
• Accessible Astro Docs：所有 Accessible Astro 项目的完整文档。
• Color Contrast Checker：符合 WCAG 的颜色对比检查器，并能生成设计系统的标记。

查看我们的路线图，了解接下来会推出哪些内容！

贡献

我们欢迎对文档的改进贡献！您可以通过以下方式提供帮助：

1. 提交问题
2. 提交拉取请求
3. 开始讨论
4. 在 Open Collective 上支持

支持此项目

您的支持帮助我们支付基本成本，并继续为 Astro 生态系统构建可访问的解决方案。成为赞助者，您不仅是在支持代码——您还在帮助为每个人创建更具包容性的网络。每一份贡献，无论大小，都有助于维护和改进这些以可访问性为重点的工具。

我们共同创造不同

我们想向所有为使网页更易访问而做出贡献的人表达由衷的感谢：

• Astro 团队，感谢你们创造了出色的静态网站生成器和精彩的 Starlight 主题
• 我们的贡献者，感谢你们投入时间和专业知识来改进这些工具
• Niek Derksen，感谢你进行全面的可访问性审核以确保符合 WCAG 标准
• 我们的赞助商，感谢你们帮助使这个项目可持续发展
• 网络社区，感谢你们拥抱并推广网页可访问性
• 你，开发者，感谢你选择让你的项目更易访问

我们在一起，不仅仅是在构建文档或组件——我们是在为每个人创建一个更加包容和可访问的网络。每一次贡献，无论是代码、文档、错误报告还是反馈，都在帮助我们更接近这一目标。✨

请记住：可访问性不是一个功能，而是一项基本权利。感谢你成为这段旅程的一部分！