无障碍

目标：WCAG 2.1 AA。无障碍不只服务于残障用户——键盘操作、清晰的焦点、足够的对比度对所有用户都更友好，也是金融服务类网站合规审查中常见的检查项。

检查清单

颜色与对比度

• [ ] 正文与小字对比度 ≥ 4.5，大字（≥ 24px 或 ≥ 19px 加粗）与图标 ≥ 3（色彩页的色板会实时计算）
• [ ] 不只靠颜色传达信息：错误加文字、状态加图标、链接加下划线
• [ ] sky 只用于深蓝背景

键盘

• [ ] 所有交互元素都能用 Tab 到达，顺序与视觉顺序一致
• [ ] 焦点始终可见（focus-visible:ring-3），不要写 outline-none 而不补焦点样式
• [ ] 对话框打开时焦点在对话框内，关闭后回到触发按钮（原生 <dialog> 自带）
• [ ] 下拉菜单、标签页、下拉选择、日历支持方向键（交互脚本自带）

语义

• [ ] 用正确的元素：跳转用 <a href>，操作用 <button>，单选用 <input type="radio">
• [ ] 页面只有一个 <h1>，标题层级不跳级
• [ ] 表单控件都有关联的 <label>；没有可见标签的加 aria-label
• [ ] 提示与错误文案通过 aria-describedby 关联
• [ ] 一组相关控件用 <fieldset> + <legend>
• [ ] 当前页导航加 aria-current="page"，当前步骤加 aria-current="step"

图片与图标

• [ ] 有意义的图片有 alt，装饰性图片 alt=""
• [ ] 装饰性图标 aria-hidden="true"
• [ ] 只有图标的按钮有 aria-label

动态内容

• [ ] 操作结果通过 Toast（aria-live）或 role="alert" / role="status" 播报
• [ ] 加载中的按钮设置 disabled 与 aria-busy="true"
• [ ] 动画尊重「减少动态效果」系统设置（base.css 已处理 Toast、对话框动画与平滑滚动）

触控

• [ ] 点击区域不小于 24×24px；主要按钮 44px 高
• [ ] 移动端导航链接使用 py-3 放大点击区域

测试方法

1. 只用键盘走一遍主要流程（公司注册、开通收单）
2. 读屏软件：macOS 旁白（⌘ + F5）、Windows NVDA
3. 浏览器工具：Chrome DevTools → Lighthouse → Accessibility；或安装 axe DevTools 扩展
4. 缩放：浏览器放大到 200%，内容不应被截断或需要横向滚动