语义、名称与键盘

浏览器从 DOM 建立可访问性树，辅助技术依赖元素的名称、角色、状态和可操作性。优先使用原生 button、a、input，不要用 div 模拟全部交互。

<label for="email">邮箱</label>
<input id="email" name="email" autocomplete="email" aria-describedby="email-error">
<p id="email-error" role="alert"></p>

可访问名称、焦点顺序和错误关联是可观察契约。aria-label 不能修复一个本来就应该使用按钮的 div，也不能替代可见标签。

练习

把一个不可聚焦的 div 菜单改为原生按钮和列表结构，要求键盘 Tab 能到达，Enter/Space 能触发，错误文本能被输入框关联。

核心机制与实现

浏览器平台由解析、事件循环、渲染、存储、权限和可观测 API 组成。把任务拆成宏任务、微任务、样式计算和绘制，才能解释顺序。

围绕“语义、名称与键盘”先写出输入 → 中间状态 → 可观察结果，再实现最小闭环。不要把事件监听、异步请求、DOM 读取或 store 写入混在一个函数里；每个副作用都要有创建、完成、取消和清理路径。

console.log('script')
queueMicrotask(() => console.log('microtask'))
requestAnimationFrame(() => console.log('paint callback'))
setTimeout(() => console.log('task'), 0)

逐步运行：先只验证成功路径，再改变一个输入；记录时间顺序、对象身份、错误类型和最终可见状态。若环境不支持某个浏览器 API，要把静态协议验证和真实浏览器验证分开记录。

失败边界与变体

• 输入为空、重复、过期或非法时，不应静默覆盖有效状态。
• 组件卸载、路由离开、标签页关闭或请求取消时，资源必须停止写入。
• 跨文档、Shadow DOM、Worker、SSR 或多标签页会改变可见边界，不能沿用单页面直觉。
• 需要持久化时记录 schema 版本和迁移失败策略；需要全局状态时先证明局部状态不足。

可运行实验与练习

在真实浏览器记录输出顺序、布局读取和长任务；改变 DOM、网络和定时器，解释哪些工作阻塞输入与绘制。

练习要求：实现一个最小版本，补一个失败测试，再给出一个替代方案及其适用条件。答案应包括实际输入序列、观察结果、修复原因和未覆盖的浏览器差异。

查看本节答案