全部笔记

可访问性不是检查清单:从键盘任务开始

从任务分配流程分析键盘入口、焦点生命周期与状态公告,并明确真实辅助技术的验收范围。

悬浮工具让键盘任务在哪一步中断

假设一个项目管理页的全部操作都在鼠标悬浮时出现,键盘用户能读任务,却无法分配负责人。颜色对比达标不能弥补操作缺失。可访问性应从完成同一任务开始,逐一确认用户不依赖特定输入方式也能继续。

将分配任务拆成找到任务、打开成员列表、选择对象、提交和确认五步,可以看到障碍往往不是某个控件颜色不够深,而是其中一步根本没有键盘入口。以下项目管理页是分析用假设案例。设计评审应先在没有鼠标的条件下走通这五步,再研究哪些快捷方式值得增加;不能把快捷键作为唯一入口,因为使用者未必知道它,也可能与辅助技术冲突。

把焦点、语义与公告分开设计

鼠标悬浮显示的工具可以在行内焦点时同时出现,但功能本身也必须在可理解路径中。任务详情入口、分配按钮和更多菜单按阅读顺序组织,鼠标与键盘执行同一业务动作。不能仅把隐藏按钮设置为可聚焦,却仍让焦点环被遮住或工具被透明度隐藏。

任务步骤需要状态返回。选择成员后保存处理中,用户知道请求尚未完成;失败保留选择并提供重试,成功明确当前负责人。视觉和非视觉反馈对应同一事实,不能为读屏器公告成功时服务器仍在处理中。

分别定义可聚焦元素、焦点顺序、操作语义和状态公告。可点击文字不自动具有按钮能力,按回车能响应也不意味着屏幕阅读器知道它的用途。每个控件有明确名称,状态变化需要在适当时机被感知而非只靠颜色。

一个任务行可以包含详情链接、分配按钮和更多动作,但不能让整行同时成为可点击容器又嵌套按钮,导致事件和语义不清。读屏器需要知道“为部署检查分配负责人”,不能让十行按钮都只叫“编辑”。可见标签可以简洁,辅助名称仍应包含足够对象信息,并与可见文字保持可辨认关系。

目标是符合适用的可访问性要求,不声称一次审核即可完全无障碍。先覆盖核心任务和原生控件,复杂拖拽提供等价操作。工具扫描不能代替键盘与屏幕阅读器检查,未验证的环境明确记录。

原生控件省下哪些实现责任

按钮名称需要对象与动作,但避免机械堆叠。十个分配按钮可以关联任务标题,阅读时既知道动作也知道对象;可见文字与辅助名称有共同词语,语音控制用户能够说出看到的名称。图标在有文字标签时作为装饰,单独使用时有适当名称,不让读屏器重复朗读图标和文字。

语义结构帮助选择浏览方式。任务列表有标题和正确表格或列表关系,读屏器可以按结构定位;只有视觉加粗并不创建标题。原生标签表达输入用途,错误描述与字段关联。ARIA 用于补充实际状态,不拿无意义属性弥补错误结构。

公告需要节制。成员列表过滤每个字符都产生整段朗读,会使用户无法完成选择;可以在合适时机报告结果数量,保存结果再单独说明。状态更新不抢走当前焦点,重要错误和普通成功采用符合任务的机制。真实辅助技术验证比推测“应该会读出来”更可靠。

原生按钮提供键盘和语义基础,自定义容器灵活但增加实现责任。优先保留原生能力,再用样式调整外观。焦点环可能影响视觉整齐,却不能因此取消;可以设计清晰的焦点样式而非删除反馈。

表格里所有小图标都进入 Tab 顺序会增加操作步数,但把它们全部移出焦点又会让功能消失。若采用复合组件的方向键导航,要完整实现对应模式,并提供清晰说明与一致焦点管理;普通数据表则不必为了少按几次 Tab 强行变成 ARIA grid。优化操作效率前,先确保实现方式与语义能力相符。

关闭弹窗后焦点应该回到哪里

原生按钮也需要正确状态。禁用按钮应有可理解原因,等待期间是否可取消明确;不要通过改变按钮文字长度导致布局移位,让鼠标和触屏目标突然移动。选择控件使用适合选项规模的方式,简单成员集合未必需要自定义复杂 combobox。

复合组件的模式必须完整。采用 listbox 或 combobox 时,焦点、选中、展开状态和方向键规则按对应模式实现;不能给普通列表加一个 ARIA 角色就声称已经支持。若团队无法充分测试复杂模式,原生选择和明确搜索表单可能更可靠。

拖拽排序提供可执行替代,例如移动到指定位置或向上向下调整,结果与权限保持一致。快捷键可以加速,但可见入口仍存在,不能要求用户背诵产品独有键位才完成基本操作。

弹窗关闭后焦点丢失、隐藏内容仍可聚焦以及错误仅以红色提示,都会使用户失去路径。陷阱在于画面似乎无异常,普通鼠标测试也能通过;必须直接从键盘执行完整动作才能发现。

成员列表异步刷新时,不能因为重建 DOM 将焦点送回 body;刚被删除的任务行也不再适合作为关闭弹窗后的返回目标。需要预先定义合理后继:相邻任务或任务列表标题。对于已经卸载的触发元素,简单调用 focus 不会恢复路径。测试必须包含对象删除和权限变化,而不只包含正常关闭。

为任务行建立可执行的交互协议

模态窗口打开时焦点进入合适位置,背景不再参与普通交互;关闭后回到触发上下文。Escape 是否关闭、未保存修改怎样确认都明确。非模态提示不随意锁定焦点,不把一个悬浮小面板伪装成必须阻断全部页面的对话框。

焦点目标被删除时选择最近合理后继。批量操作删除多行,可回到列表标题或仍存在的相邻行,并公告结果。用户不会被丢到页面顶端重新查找。返回目标根据业务对象而非固定 DOM 索引,动态排序后仍然正确。

权限变更也需要解释。分配过程中用户失去编辑资格,窗口显示真实拒绝与后续入口,焦点保持可达;不直接隐藏所有控件造成无声中断。授权由服务端决定,可访问性设计负责让拒绝状态同样可理解。

使用正确标题结构、表单标签与按钮名称,交互区顺序对应阅读顺序。模态窗口管理进入、限制和返回焦点;非模态区域不随意抢焦点。异步完成信息使用适当状态公告,不把所有变化都设为打断式提醒。

分配窗口使用清楚的标题与当前成员说明。选择完成后不应立刻把焦点抢到全局通知,而是在原任务上下文保持位置,并通过适当 live region 告知保存结果。公告只包含必要事实,避免重复朗读整行。等待与失败状态要分别处理,保存失败仍允许用户修正,不把关闭窗口误当成已经保存。

用真实辅助技术完成分配任务

键盘顺序与视觉顺序一致尤其重要。响应式布局将操作栏移到上方时,DOM 仍应形成合理任务路径;固定导航和浮层不遮挡焦点。文字缩放后按钮和标签允许换行,操作不因容器固定高度被截断。

焦点外观要有足够辨识度,并在各种背景、选中行和高对比模式检查。当前行选中和键盘焦点是不同状态,颜色不是唯一线索。自动检查可以发现部分对比和名称问题,却通常不能证明任务焦点生命周期完整。

从地址栏开始只用键盘创建、修改和删除任务,检查焦点一直可见。用屏幕阅读器确认控件名称与状态,放大文字并检查内容。加入弹窗、错误和异步操作,确保关闭后能回到触发点继续工作。

键盘验收卡从页面最上方开始:跳过导航,进入任务表,打开分配窗口,选择成员,确认并返回原行。整个过程中焦点都应可见,关闭窗口后不会跳到页面开头。再用阅读器听到任务名称、按钮用途、当前成员和保存结果,不能依赖附近视觉位置补充含义。将操作改成拖拽排序时,提供同样结果的非拖拽路径。自动扫描只作为补充,测试报告分别记录浏览器、辅助技术与已验证任务,不把一个绿色分数写成全面符合标准的保证。

把验证范围写进可访问性报告

验收环境可以选择团队主要支持的浏览器与阅读器组合,并记录其他未验证组合。不同辅助技术可能有差异,一处公告可读不保证处处一致。遇到差异先核对语义与模式,再调查兼容问题,不把阅读器使用者要求换工具当作默认解决方案。

高频任务的步数可以在功能可达后优化。跳过导航、合理分组和成熟复合组件减少重复按键,但仍保留清楚入口与完整模式。优化前后对比同一任务的焦点路径,确保减少操作不是通过隐藏功能。效率和可完成性分别验收。

可访问性债务也有负责人和修复期限。未覆盖组件标为待验证,已知障碍写具体任务后果,发布判断依据真实风险。报告不必许诺全面完成,但应让团队知道还有哪些用户可能无法工作,以及下一步将验证什么。

测试可以记录每一步的控件名称、按键、焦点位置与业务结果。故意延迟保存、改变权限和删除触发行,检查仍有合理恢复。截图证明外观,读屏输出和操作记录证明交互,二者共同构成证据,不只报告一个工具分数。

上线后保留键盘回归路径,组件升级时重测名称与焦点,不以视觉无变化推定行为无变化。真实用户反馈进入具体障碍记录,区分输入方式、辅助技术和任务条件。改动完成核对同一任务是否可独立完成,不让关闭工单成为唯一成功标准。

为一次异步任务记录焦点时间线

设想用户在任务行打开分配窗口,搜索成员,选择候选人并提交。请求尚未返回时列表自动刷新,原任务移动到下一页。保存随后成功,关闭窗口。若实现只记住触发按钮的 DOM 引用,此时返回目标可能已经不存在。需要记录业务上下文,再根据当前界面选择合理后继,而不是假设原节点永远留在原位。

可以为每个阶段写一行协议:进入窗口时焦点在哪;搜索结果更新时谁保持焦点;提交中哪些操作可用;失败时怎样继续;成功关闭后回到何处;对象已不可见时使用什么后继。这个时间线把焦点当成交互状态,不是渲染结束后随手补的一次调用。它也帮助开发者判断哪些重建 DOM 行为会打断任务。

失败路径同样重要。服务器返回成员不再可分配,焦点可以保持在相关选择控件,错误说明与之关联,用户可以改选。不能一边把焦点送到消息区域,一边把选择控件重置为空,让用户重新猜之前发生了什么。如果错误属于整个任务,则提供可达摘要和下一步,而非把所有错误都强行贴到某个字段。

这里的时间线不是要求所有界面采用完全相同的焦点位置。适当初始焦点取决于内容长度、风险和组件模式。重要的是选择有依据、保持一致,并用真实辅助技术验证;编程调用 focus 成功不等于用户已经知道发生了什么。

数据更新与用户浏览需要不同节奏

项目列表每几秒更新一次,可以让视觉用户看到新数据,也可能不断打断阅读器。不要把整个表格放进高频 live region。可以保留当前阅读上下文,在适当时机说明有更新,并让用户选择刷新或查看变化。关键警报与普通列表更新的紧急程度不同,不应采用同一种打断方式。

搜索建议也要控制公告。用户连续输入时,不必每次重读所有结果;可以遵循所采用组件模式,提供结果数量、当前活动选项和无结果状态。结果更新不能把焦点从输入框抢走,否则键盘用户每输入一个字都需要重新定位。活动选项与已确认选择分别表达,不能让浏览候选人变成立即修改负责人。

虚拟列表进一步增加责任。当前聚焦行离开可视窗口时,不能直接卸载到不可达状态;读屏器看到的行数与实际位置需符合组件语义。若实现无法可靠支持任务,可以提供分页或其他等价路径。减少 DOM 节点是一种性能手段,不是牺牲操作可达性的理由,也不自动要求所有普通表格使用复杂网格模式。

测试可以把网络延迟、自动刷新和快速输入叠加,观察用户能否持续知道当前任务、对象和状态。只在静止页面检查 Tab 顺序,会漏掉最常见的运行期问题。异步功能越多,焦点和公告越需要独立于视觉动画设计。

可见焦点需要在实际遮挡条件下检查

一个控件有焦点环,但被固定页头、底部工具条或打开的帮助浮层盖住,用户仍无法判断位置。测试从页面顶部逐步导航,在缩放、窄屏和长内容条件下检查。滚动到元素附近不等于元素完整可见,固定区域会改变实际可用视口。需要根据页面结构提供合理滚动和布局,而不是不断提高所有浮层的层级。

选中、悬浮和焦点可以同时出现。表格行选中后仍要能看出正在操作哪个按钮,深色背景上焦点样式也要可辨。高对比模式可能改变颜色,不能只靠细微阴影表达状态。图标和文本不应在焦点时位移,否则用户可能误以为跳到了另一控件。

触屏与键盘要求也会交汇。按钮视觉上很小,却可以通过足够的可点击区域保持操作可用;但放大点击区域不能相互覆盖,也不能让标签与目标关系变模糊。具体尺寸要求需按适用标准与例外核对,不能凭一个统一像素值宣称所有场景已经符合。

放大文字后检查任务名称、按钮标签和错误内容是否完整。固定高度容器可能裁掉最必要的恢复动作。允许换行、重新排列和合理滚动比缩小字体更可取。响应式设计应保留任务能力,不是仅保持截图整齐。

把不同证据放在不同结论后面

自动扫描通过可以说明扫描规则没有发现某些问题,键盘记录可以说明特定任务路径可操作,阅读器记录可以说明特定组合下语义与公告有效。三类证据不能互相替代。报告可以逐项写出任务、条件、工具或人工操作、观察结果和未覆盖范围,而不是给全站一个没有依据的“无障碍完成”标签。

一次实际评审可以由一位测试者按预定任务操作,另一位记录焦点和业务状态,不在每一步提示正确按键。测试者找不到入口本身就是结果。修复后重跑同一路径,再增加一个异常条件,例如成员删除或权限改变,确认修复没有只照顾演示用的顺利流程。

用户反馈也要回到任务证据。记录“使用某输入方式,在哪个步骤无法继续”,比“某组件不友好”更容易行动。必要时征得同意获取辅助技术与浏览器信息,不采集无关内容。可访问性工作的结束标准是障碍对应的任务被恢复,而不是属性数量增加或工具分数上涨。

快捷键只作为加速,不成为唯一入口

为分配动作增加快捷键,可以帮助熟练用户,但要检查与浏览器和辅助技术既有键位是否冲突。用户仍能通过可见按钮完成同一任务,快捷键只改变速度,不改变授权或保存方式。必要说明放在可发现帮助中,不要求首次用户先记住按键才能操作。

参考资料