AI使用教程

移动端、无障碍与打印

验证小屏布局、键盘焦点、语义替代、减少动态和打印降级。

适合发布前验收。目标不是让每个状态看起来完全相同,而是让内容、操作和位置感在不同能力条件下保持等价。

多状态验收矩阵
维度检查通过标准
360px 移动端导航变抽屉、表格局部滚动正文无截断和横向溢出
键盘Tab、Enter、方向键、Esc焦点顺序与视觉顺序一致
读屏标题、标签、状态、替代文本不依赖颜色和位置描述
减少动态关闭自动旋转与非必要过渡状态变化仍可理解
打印隐藏工具栏与浮层保留标题、图注、表格和来源

一次移动端检查

  1. 01

    从顶部进入

    检查品牌、搜索和知识树触发器是否拥挤。

  2. 02

    读完整篇正文

    检查代码、表格、Mermaid 和媒体只在自身区域扩展。

  3. 03

    打开所有浮层

    确认居中、可关闭、焦点受控且背景不误触。

  4. 04

    切换系统偏好

    验证深色、减少动态和打印样式。

accessible-control.html
<button type="button" aria-expanded="false" aria-controls="chapter-navigation"> 打开本文导航 </button>

内容优先于交互成功

关键结论不得只在 hover、动画完成、Canvas 或 JavaScript 成功后出现。
本文导航

本页目录

本页没有小标题