HTML、CSS与可访问性 · KNOWLEDGE CHAPTER

K05

可访问性与用户适配

可访问性需要让视觉、键盘与辅助技术读到同一套任务状态。焦点是当前操作位置，选中是业务选择，可见是绘制结果，可交互是行为许可，四者不能互相推断。每个状态变化都应回答：用户在哪里、能做什么、怎样知道结果、如何继续下一步。

HTML、CSS与可访问性2 道章节练习8 道主练关联

先修知识：K01 · 语义与表单 K03 · 盒模型与布局 K04 · 响应式与资源

核心模型

原理与机制

焦点路径必须能预测

复合控件常用 Tab 进入和离开、方向键在内部移动。roving tabindex 让一项为 0、其他为 -1，并主动移动焦点；aria-activedescendant 可把实际焦点留在容器，但必须满足角色与引用要求并同步视觉和滚动。远程标签页切换明显较慢时，方向键只移动焦点，Enter/Space 再激活；预加载无延迟时可聚焦即选中。Flex order、Grid 放置通常只改视觉顺序，不同步 DOM 阅读与默认键盘顺序，应先确立语义流程，不用正 tabindex 修补冲突。

隐藏、失活与模态是不同动作

display:none 不生成布局盒；visibility:hidden 保留空间且通常不可聚焦，后代可恢复可见；opacity:0 仍可能点击、聚焦和被读出。inert 使子树失活并退出可访问性树，却不隐藏外观。关闭浮层先安排焦点去向，再让内容失活并完成视觉收尾。dialog.showModal() 建立模态顶层并使背景失活，show()/open 不等价；popover 是非模态顶层机制，不自动提供菜单等语义。对话框需名称、合理初始焦点、内部 Tab/Shift+Tab 循环、可见退出方式与关闭后落点；触发项已删除时转向下一项或稳定标题。

更新通过摘要通知，而非抢夺焦点

异步搜索可预先放置 role=status 的稳定区域，在当前请求结果稳定后更新简短摘要。polite 通常等待适当时机，assertive 适用于真正紧急的情况；aria-atomic 控制完整朗读倾向，aria-busy 表示批次未完成。不要把结果列表或每个流式片段都设为播报内容，防抖、请求序号和摘要归并共同防止旧消息。进度条优先使用带名称的 progress，未知总量不伪造百分比，阶段变化、完成和失败用适度摘要补充，焦点留在用户当前操作处。

可见性要经过用户设置验证

:focus-visible 依赖浏览器启发式，不是严格键盘检测器。保留 outline 等明确指示，检查裁剪和粘性栏遮挡；可用实际滚动容器的 scroll-padding 与目标 scroll-margin 预留空间。WCAG 2.2 AA 的目标尺寸最低一般为 24×24 CSS 像素或满足规定例外，不能误说成统一 44×44；适用的非文本对比要求通常为 3:1。forced-colors 不等于深色模式，阴影或渐变边界可能消失，应保留真实边框、系统色与文字状态，避免全站 forced-color-adjust:none。

阅读方向属于内容语义

margin-inline-start 等逻辑属性随 direction 和 writing-mode 映射，inline 不能永远理解为水平。dir 表达基础文本方向，未知内容可用 dir=auto；bdi 隔离用户名等双向片段，防止影响旁边数字与标点，bdo 则是强制覆盖方向的另一工具。RTL 不应整体 scaleX(-1)，导航方向图标可按语义适配，品牌、数字、媒体内容不应机械镜像。窄屏重排、放大和混合语言都要检查视觉、阅读、Tab 三种顺序是否仍一致。

最小示例

html

<button id="open" type="button">查看说明</button>
<dialog id="help" aria-labelledby="help-title">
  <h2 id="help-title">操作说明</h2>
  <p>关闭后可以继续填写。</p>
  <form method="dialog"><button autofocus>关闭</button></form>
</dialog>
<p role="status" id="status"></p>
<script>
const trigger = document.querySelector('#open');
const dialog = document.querySelector('#help');
trigger.addEventListener('click', () => dialog.showModal());
dialog.addEventListener('close', () => trigger.focus());
</script>

在支持 dialog 的浏览器用键盘打开，预期焦点进入关闭按钮，背景不能参与正常交互，Escape 或关闭按钮能退出，随后回到仍存在的触发按钮。status 区域先存在但暂不更新，后续可写入稳定摘要。此例不是删除流程；若触发按钮消失，必须换成有效落点，仍需屏幕阅读器实测。

环境：支持本章相关特性的现代浏览器；CSS 片段需配合说明中的最小 HTML。

核验：未执行教学示例；说明中的结果为机制推演，不是本轮测试通过记录。

边界与取舍

边界

aria-modal 和 aria-hidden 仅表达语义，不能替代背景失活或阻止可聚焦后代。
淡出结束事件可能因零时长或取消而不触发；业务关闭与快速重开不能只靠 transitionend。
强制颜色不会一概删除所有 URL 图片；错误和选中也不能只依赖颜色区别。

取舍

原生模态机制减少实现负担，但仍需命名、焦点和工作流验收；复杂自绘浮层承担更多责任。
自动标签激活减少确认动作，但加载延迟会拖慢导航；手动激活更适合昂贵或远程面板。

口述示范

我按焦点、选中、可见和可交互四种状态检查组件，再沿打开、操作、异步更新、关闭走完整键盘路径。通知用稳定摘要，布局尊重阅读顺序和用户颜色、方向、缩放设置，不能只用截图判断完成。

章节练习

练习 1

假设 TranslateFlow 的远程标签页加载 800ms，搜索又不断更新结果，怎样设计键盘与播报？

展开检查点

方向键只移动焦点，Enter/Space 激活；保持 aria-selected 与 panel 关联。
稳定 status 区域归并最新请求摘要，避免每次输入抢焦点。

假设 CSSLab 的移动端重排、透明浮层与强制颜色主题一起验收，列出高风险点。