Web Accessibility Academy · 课时

浏览模式与焦点模式

理解用户与页面交互的两种方式。

第 3 / 4 课13 个步骤

浏览模式与焦点模式 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。

两种交互方式

桌面屏幕阅读器有两种模式。浏览模式用于朗读内容,而焦点模式用于输入内容。了解这两种模式可以消除许多困惑。🔁

浏览模式用于朗读

在浏览模式下,H、K 和箭头键等按键用于浏览页面。屏幕阅读器会拦截这些按键,让您可以快速浏览标题和链接。

虚拟副本

浏览模式基于页面扁平化后的虚拟缓冲区运行。因此,无论在哪种文档中,您都可以用相同的方式使用箭头键浏览文本。

焦点模式用于输入

当您到达文本字段时,屏幕阅读器会切换到焦点模式。此时,您按下的键会直接传递给输入框,而不是用于导航。

为什么切换很重要

如果没有两种模式,输入字母 H 时就会跳到标题,而不是写入 H。焦点模式让您能够真正填写表单。

自动切换

当焦点落在可编辑字段或需要接收原始按键的组件上时,NVDA 会自动切换到焦点模式。

手动切换模式

您也可以手动切换。在 NVDA 中,按 NVDA 加空格键可以在浏览模式和焦点模式之间切换,以纠正自动判断错误的情况。

NVDA: press NVDA + Space to toggle modes

VoiceOver 中的对应功能

VoiceOver 将其输入状态称为 Quick Nav off。打开或关闭 Quick Nav,可以在探索和交互之间切换,作用类似于这两种模式。

自定义组件容易造成混乱

伪造的按钮或假装成菜单的 div 可能让屏幕阅读器处于错误的模式,导致按键无法执行有用的操作。

正确的角色可以解决问题

正确的角色会告诉屏幕阅读器何时进入焦点模式。真正的表单控件和正确的 ARIA 角色可以让模式按预期切换。

测试两种路径

进行检查时,请确认在浏览模式下可以正常朗读,并且焦点模式启动后每个输入框都能接受文本。

快速检查

屏幕阅读器的焦点模式允许用户做什么?

回顾

浏览模式负责朗读和导航;焦点模式负责输入和交互。正确的角色会自动触发模式切换,让用户始终能够顺利操作。✅

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
30
课程
120

常见问题解答

「浏览模式与焦点模式」课时是免费的吗?

是的 — 「浏览模式与焦点模式」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Web Accessibility Academy 课程的其余内容,请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。

「浏览模式与焦点模式」这节课中我会学到什么?

理解用户与页面交互的两种方式。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Accessibility Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「浏览模式与焦点模式」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Web Accessibility Academy 课中编写并运行代码吗?

能。每节 Web Accessibility Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 启用 NVDA、VoiceOver 和 TalkBack
  2. 核心手势与快捷键
  3. 浏览模式与焦点模式
  4. 可重复执行的屏幕阅读器测试流程
← 返回 Web Accessibility Academy