关于 responsive-accessibility
一项检查界面在不同视口、缩放级别和方向下是否保持无障碍的设计技能，涵盖内容重排、文本缩放、触控目标和测试方法。
主要功能
- 01200% 缩放重排指南
- 02文本缩放避免裁切
- 03支持纵向与横向显示
- 04触控目标尺寸建议
- 05缩放与视口测试清单
适用场景
- 01检查响应式布局的无障碍性
- 02测试页面在 200% 浏览器缩放下的表现
- 03检查小屏幕上的导航
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/responsive-accessibility确认已加载。
详细介绍
响应式无障碍
响应式设计不只是适配屏幕尺寸，还要确保在各种视口、缩放级别和屏幕方向下都能保持无障碍体验。 如果布局在 1440px 下正常，却在缩放至 200% 时崩坏，就辜负了最需要缩放功能的用户。
核心要求
缩放至 200% 时文本重排
- 缩放至 200% 时，所有内容都必须重排为单列， 且不得出现水平滚动
- 这是 WCAG 2.1 AA 级要求（成功标准 1.4.10）
- 将视口设为 1280px，并把浏览器缩放比例设为 200% 进行测试 — 此时页面必须可用，且无需水平滚动
- 例外：如果不会丢失任何信息，数据表格、地图和图表可以水平滚动
文本缩放至 200%
- 文本缩放至 200% 时仍必须清晰可读
- 文本不得被裁切、截断，也不得与其他元素重叠
- 文本应使用相对单位（rem、em、%），而非固定像素值
- 行高和间距应按比例缩放
不限制屏幕方向
- 内容必须同时适用于纵向和横向屏幕方向
- 除非功能必需，否则绝不锁定屏幕方向 （钢琴应用可能需要横屏；表单则不需要）
- 部分用户会因身体条件限制而将设备固定在特定方向 — 锁定屏幕方向可能会彻底阻碍他们访问
设计模式
流式布局
- 使用能灵活适配的网格，而非在固定断点处突然切换
- 为内容容器设置 max-width，以提升可读性 （每行 45–75 个字符）
- 内容重排前应先压缩留白
- 避免使用会导致水平滚动的固定宽度元素
内容优先级
- 明确每个断点下的核心内容
- 在小屏幕上：展示核心内容，并提供访问其余内容的方式
- 不要将关键功能隐藏在“仅限桌面端”的特性之后
- 导航应能适配不同屏幕（汉堡菜单即可），但必须确保所有目的地均可访问
触控与指针适配
- 在小视口下：将触控目标增大至至少 48px
- 在大视口下：可使用适合指针操作的尺寸 （至少 24px）
- 使用
@media (pointer: coarse)检测指针类型，以适配触控优先的尺寸 - 在触控设备上应增大目标之间的间距
缩放安全模式
- 缩放时，粘性页眉不得占用过多垂直空间 （在 200% 缩放下占据视口 30% 的页眉会构成障碍）
- 必须在 200% 缩放下测试固定定位元素
- 缩放时，工具提示和弹出窗口必须保持可见且可访问
- 如果内容超出缩放后的视口，模态对话框必须支持滚动
测试流程
- 在 1280px 视口下测试浏览器缩放比例为 100%、150% 和 200% 的情况
- 测试视口宽度为 320px 的情况（相当于移动设备）
- 测试纵向和横向两种屏幕方向
- 将系统字体大小设为最大选项后进行测试
- 在每个测试点验证：无水平滚动、无文本裁切、无元素重叠，且所有交互均可正常使用
评估清单
- 缩放至 200% 时，内容会重排，且不会出现水平滚动
- 文本缩放至 200% 时仍清晰可读
- 支持纵向和横向两种屏幕方向
- 小视口下会增大触控目标
- 缩放时，粘性／固定元素不会占据视口过多空间
- 在所有受支持的视口尺寸下，功能均不会丢失
- 所有文本均使用相对单位
评论
支持 Markdown