展现形式的选择与无障碍

开始前

• 了解基本的 HTML 表单与链接语义。
• 不要求会写 JavaScript，但需要能读懂键盘与焦点行为的描述。

按顺序阅读与检查

1. 建立展现模式的选择地图

   必读 · 电商展现模式：选择地图与阅读入口

   完成检查：能按空间、交互、运动三个维度描述一个组件。

2. 读懂 WCAG 的版本与等级

   必读 · WCAG：网页内容无障碍指南的版本、级别与成功标准读法

   完成检查：能说明 A、AA、AAA 的含义以及为何不把 AAA 当整站硬性要求。

3. 理解 ARIA 与原生元素的关系

   必读 · ARIA：角色、状态与属性，及其与 APG 和原生元素的关系

   完成检查：能解释为何优先使用原生元素而不是补 ARIA。

4. 掌握模态对话框的焦点规则

   必读 · Modal：中断当前流程的模态对话框

   完成检查：能写出打开、Tab 循环、Escape 与关闭后的焦点位置。

5. 区分抽屉与 Modal

   必读 · Drawer：侧滑抽屉

   完成检查：能判断某个侧栏是否应当阻断背景。

6. 区分 Tooltip、Popover 与 Disclosure

   必读 · Popover：轻量浮层与提示

   完成检查：关键购买条件不放在只能悬停查看的浮层里。

7. 处理瞬时反馈

   必读 · Toast：瞬时反馈与状态提示

   完成检查：错误信息就近保留，不靠会消失的提示传达必须阅读的内容。

8. 组织导航与面包屑

   必读 · Navigation Menu：导航菜单与 Mega Menu

   完成检查：导航不滥用 role=menu，键盘可展开与关闭。

9. 控制轮播与自动播放

   必读 · Carousel：有限空间中的序列浏览

   完成检查：能写出暂停控制与减少动态处理。

10. 区分空、被排除与失败

    必读 · Empty State：空状态

    完成检查：三类原因分别有下一步。

11. 选读：布局偏移对展现的约束

    选读 · Cumulative Layout Shift（CLS）：布局偏移的计算与阈值

    完成检查：能解释固定元素与动画为何会造成偏移。