思维模型
焦点管理
帮助键盘用户按不影响含义和操作的顺序在控件之间移动,并通过可见提示显示当前活动的控件。
探索一下
键盘焦点标明哪个控件当前已准备好接收键盘输入。假设有一个注册表单,“电子邮箱”正下方紧接着是“密码”,中间没有其他控件。用户输入电子邮箱地址后按下 Tab 键。接下来怎样移动焦点,才能保留这个表单的顺序?
下一个是哪个控件?
了解如何用键盘在控件之间移动,以及如何判断哪个控件已准备好接收输入。
理解概念
理解概念
键盘焦点标明页面上哪个部分当前已准备好接收键盘输入。焦点管理能帮助你按合理的顺序在控件之间移动,并看清哪个控件当前处于活动状态。你可以试着在一个简短的表单中连续按 Tab 键,看看焦点移到了哪里,以及你能否看见它。
详细讲解
详细讲解
键盘焦点标明当前已准备好接收键盘输入的元素。焦点指示器是一种可见的变化,比如按钮周围出现边框,用来显示哪个元素获得了焦点。焦点管理既涉及用户移动的顺序,也涉及用户能否找到当前活动的元素。[1][2]
HTML 是描述网页的标记语言。在 HTML 页面中,按顺序进行键盘导航通常会用到 Tab 键。如果没有脚本(改变页面行为的代码),也没有 tabindex 属性(可以改变元素能否获得焦点及导航顺序的属性),导航顺序就会遵循各组件在内容中的排列顺序。因此,页面代码中的控件顺序是一个重要的起点。[1]
假设有一个注册表单,“电子邮箱”之后是“密码”,两者之间没有其他控件,也没有其他依赖关系。从“电子邮箱”移到“密码”,就保留了这个表单的顺序。不过,焦点顺序并不总要与视觉位置一致:只要不影响含义和操作,两个相互独立的栏可以按任一先后顺序访问。让焦点顺序与布局所暗示的阅读顺序相呼应,是一种最佳实践。[1]
模态对话框是页面内的一种窗口。它打开时,周围页面暂时无法交互。在“焦点顺序”指南的示例中,打开模态对话框会将焦点移入其中,对话框外的内容无法获得焦点。这个示例没有规定焦点最初必须移到第一个可交互控件上,浏览器控件仍可能包含在焦点循环中。关闭对话框后,焦点会回到打开它的按钮,或该按钮之后的元素。[1]
《Web 内容无障碍指南》(WCAG)分别针对焦点顺序和焦点可见性设置了成功准则,也就是具体要求。“焦点顺序”准则 2.4.3 适用于页面支持顺序导航,且导航顺序会影响含义或操作的情况;它要求这个顺序同时保留含义和可操作性。“焦点可见”准则 2.4.7 要求提供一种带有可见焦点指示器的键盘操作模式。指示器不能因为时限到期而消失,但这项准则并不要求每次使用指针交互后都显示指示器,也没有规定它必须是什么形状。[1][2]
这些“理解成功准则”页面解释了相关准则,并提供示例和实现方法。它们是指导材料,并非衡量普遍改善效果的实验。检查表单的焦点顺序和可见指示器,是一种实用的检查方法,但不能据此认定整个网站满足了所有无障碍要求或法律义务。[1][2]
研究依据
研究依据
- 适用范围说明:“焦点顺序”适用于支持顺序导航,且导航顺序会影响含义或操作的情况。可能有不止一种顺序满足这项准则;焦点顺序并不总要与视觉布局完全一致。这项准则评估的是获得焦点的元素的先后顺序,并不规定哪些内容都应获得焦点。[1]
- 示例说明:模态对话框示例将焦点移入对话框,并使周围的页面内容无法获得焦点。浏览器控件可能仍在焦点循环中。关闭对话框后,焦点会回到打开它的按钮,或该按钮之后的元素;示例没有要求焦点最初必须移到第一个可交互控件上。[1]
- 可见性说明:“焦点可见”要求提供一种带有可见焦点指示器的键盘操作模式。指示器不能有显示时限。指南将指针交互时也显示指示器列为最佳实践,而这项准则并未规定指示器的形式。[2]
适用局限
适用局限
所提供的文档是官方解释性指南,并非实证研究,因此不能据此确定焦点管理对任务完成、认知或行为产生了多大的可测量影响。注册表单是假设的教学示例,并非实际观察结果。这两项准则只涉及无障碍的特定方面;仅检查这两项,无法认定网站完全符合 WCAG 或法律要求。引用更正:原课程中“焦点可见”的参考文献 [5],在这里替换为所提供的 WCAG 2.2 指南 [2]。此前的参考文献列表及其日期不视为已核实;这里只保留所提供的两个来源,未知的出版年份记为 null。
参考来源
参考来源
- [1] 理解成功准则 2.4.3:焦点顺序W3C Web Accessibility Initiative
- [2] 理解成功准则 2.4.7:焦点可见W3C Web Accessibility Initiative
试一试
检验你的理解
在“焦点顺序”指南的模态对话框示例中,对话框打开时,键盘焦点会被移到哪里?
查看文章解释
答案: 对话框内部,但没有规定必须先移到哪个控件上。
示例将焦点移到模态对话框内部。它没有规定最初必须让第一个可交互控件获得焦点。
“焦点可见”准则 2.4.7 有什么要求?
查看文章解释
答案: 提供一种键盘操作模式,其中的焦点指示器可见,且没有显示时限。
这项准则要求提供一种焦点可见的键盘操作模式,且指示器不能有显示时限。它没有规定指示器必须是什么形状,也不要求每次使用指针交互后焦点都可见。
当顺序导航会影响页面的含义或操作时,“焦点顺序”准则 2.4.3 有什么要求?
查看文章解释
答案: 焦点顺序必须保留含义和可操作性。
可操作性指的是能够操作页面。这项准则要求焦点顺序保留含义和操作;它允许存在不止一种合理顺序,但不要求页面提供每一种可能的顺序。
继续探索
为眼前的选择,再找一个有用的想法。
Reframo 的全部已发布文章均可免费阅读。准备好后,随时继续探索。