用途
本技能提供一套基于 Tailwind CSS 的无障碍（Accessibility）实现模式，以 WCAG 2.2 为当前标准，面向 2025/2026 年的前端开发场景。它把无障碍要求转化为可直接使用的 Tailwind 工具类与组件示例，便于在构建界面时同步满足可访问性要求。
主要能力
WCAG 2.2 相关要点
资料列出与 Tailwind 相关的关键新增项：
- 2.5.8 目标尺寸（Level AA）：最小 24x24 CSS 像素，推荐 44x44。
- 2.4.11 焦点不被遮挡：焦点指示器必须可见。
- 2.4.13 焦点外观：增强的焦点指示器要求。
- 3.3.7 冗余输入：不要求重复输入信息。
- 3.2.6 一致的帮助：帮助机制位于一致位置。
焦点管理
提供焦点环工具类示例，包括默认焦点环、仅键盘用户可见的 focus-visible、父容器 focus-within，以及自定义 .focus-ring 与 .focus-ring-inset 组件类。还包含跳转链接（Skip Links）与模态框焦点陷阱（Focus Trap）模式，使用 role="dialog"、aria-modal、aria-labelledby 等属性。
屏幕阅读器工具
涵盖 sr-only 视觉隐藏、focus:not-sr-only 聚焦显示、图标按钮的 aria-hidden 与 sr-only 标签、表单标签隐藏，以及通过 role="status"、aria-live、role="alert" 播报动态内容。
颜色对比
给出高对比度文本、大文本 3:1 要求、交互元素 3:1 对比、暗色模式对比维护，以及通过 @theme 定义高对比焦点环颜色变量的示例。
动效与动画
使用 motion-reduce:animate-none、motion-reduce:transition-none 等类尊重用户的减弱动效偏好，并提供 .animate-fade-in、.animate-slide-up 等安全动画组件类，以及悬停暂停动画的示例。
表单无障碍
包含带标签的文本输入、复选框、单选组（fieldset/legend）、错误状态（aria-invalid、aria-describedby、role="alert"），以及基于 aria-invalid 属性的 @custom-variant 样式方案。
交互组件
提供可访问按钮（加载状态 aria-busy、图标按钮 aria-label、切换按钮 aria-pressed）、下拉菜单（aria-haspopup、aria-expanded、role="menu"）与标签页（role="tablist"、role="tab"、role="tabpanel"）的示例。
触摸目标（WCAG 2.2 重点）
列出目标尺寸等级与对应 Tailwind 类：AA 最小 24x24（min-h-6 min-w-6）、推荐 44x44（min-h-11 min-w-11）、AAA 44x44、最优 48x48（min-h-12 min-w-12）。并对比平台指南：Apple iOS 44x44 点、Google Android 48x48 dp、Microsoft Fluent 44x44 像素。还包含扩展点击区域、交互元素间距（24px 间距或 24px 目标）、以及 WCAG 2.2 允许的例外情况（行内文本链接、浏览器控件、尺寸为信息必需、同页存在更大等效目标）。
文本无障碍
涉及行高（leading-relaxed）、行宽（max-w-prose）、段落间距、相对单位文本缩放，以及避免固定像素文本。
语义化 HTML
展示地标区域（header、nav、main、article、aside、footer）与标题层级（H1-H3）的 Tailwind 写法。
使用方式
资料以代码片段形式呈现，可直接复制对应的 Tailwind 类与 HTML 结构到项目中，或抽取为 @layer components 中的组件类复用。
适用场景
适合在构建或审查 Tailwind CSS 界面时参考，尤其是需要满足 WCAG 2.2 合规、键盘可访问、对比度达标、触摸目标合规的组件开发场景。
限制
资料末尾的“Testing Accessibility / Browser DevTools Checklist”部分内容不完整，未提供具体检查项。安装命令、收费与价格信息暂未提供。