如何让 NVDA 分别读取同一行的元素?
How can I make NVDA read elements on the same row separately?
我在使用 NVDA 屏幕 reader 时遇到问题,因为它会在一个块中读取同一行上的所有元素。
例如,使用以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul > li {
list-style: none;
display:inline-block;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
</ul>
</nav>
</body>
</html>
这将在一行中显示所有导航 link,这在视觉上是正确的,但是 NVDA 在浏览模式下,当使用箭头键滚动浏览时,将读取所有 link一起。用户不能在每个人之间移动 link,这意味着不可能停留在一个人和 select 上。
段落中间的 link 也会发生同样的情况:
<p>NVDA will not stop on <a href="#">This link</a> so a user can select it.</a>
在我的导航示例中,更改样式以便每个 link 都在单独的行上:
nav > ul > li {
list-style: none;
display:block;
}
修复了 NVDA 的问题 - 用户可以在 link 秒之间移动 - 但在视觉上是错误的。
我发现使它在视觉上正确并强制 NVDA 单独读取它的唯一方法是将每个锚点显示为列表项中的一个块:
nav > ul > li {
list-style: none;
display:inline-block;
}
nav > ul > li > a {
display: block;
}
但这感觉很老套,并不是在所有情况下都是解决方案(例如,这在段落中不起作用)。
是否有我可以添加的属性,或任何其他更好的方法让 NVDA 分别读取每个元素?
此问题存在于所有浏览器中。
您无需执行任何操作,用户可以导航到每个 link 并激活它们。用户可以随时使用 CONTROL 键中断读数。此外,在读取 link 之后,用户可以使用 SHIFT-TAB 键向后导航到每个 link。用户也可以使用 K 键在 link 之间导航。另外,用户可以使用NVDA+control+左箭头键逐字向后移动。
这里的关键是通过确保每个 link 具有 href
属性来确保每个 link 都可以通过 TAB 获得焦点。所以 <a>Not really a link</a>
不会被识别为 link 并且不会成为 TAB 焦点。
这是 NVDA 键盘命令的参考 http://community.nvda-project.org/documentation/userGuide.html
如果您想更改默认行为以使 NVDA 读取 links 就像每行只有一个一样,就像 JAWS 所做的那样,请执行以下操作:
- 转到 NVDA 菜单(插入|n)。
- 转到首选项。
- 选择浏览模式。
- 取消选中第二个复选框“支持时使用屏幕布局”。
- 选择确定。
- 返回 NVDA 菜单(插入|n)。
- 选择“保存配置”。如果您不这样做,根据您配置 NVDA 的方式,此更改可能不会在重新启动后持续存在。
我在使用 NVDA 屏幕 reader 时遇到问题,因为它会在一个块中读取同一行上的所有元素。
例如,使用以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul > li {
list-style: none;
display:inline-block;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
</ul>
</nav>
</body>
</html>
这将在一行中显示所有导航 link,这在视觉上是正确的,但是 NVDA 在浏览模式下,当使用箭头键滚动浏览时,将读取所有 link一起。用户不能在每个人之间移动 link,这意味着不可能停留在一个人和 select 上。
段落中间的 link 也会发生同样的情况:
<p>NVDA will not stop on <a href="#">This link</a> so a user can select it.</a>
在我的导航示例中,更改样式以便每个 link 都在单独的行上:
nav > ul > li {
list-style: none;
display:block;
}
修复了 NVDA 的问题 - 用户可以在 link 秒之间移动 - 但在视觉上是错误的。
我发现使它在视觉上正确并强制 NVDA 单独读取它的唯一方法是将每个锚点显示为列表项中的一个块:
nav > ul > li {
list-style: none;
display:inline-block;
}
nav > ul > li > a {
display: block;
}
但这感觉很老套,并不是在所有情况下都是解决方案(例如,这在段落中不起作用)。
是否有我可以添加的属性,或任何其他更好的方法让 NVDA 分别读取每个元素?
此问题存在于所有浏览器中。
您无需执行任何操作,用户可以导航到每个 link 并激活它们。用户可以随时使用 CONTROL 键中断读数。此外,在读取 link 之后,用户可以使用 SHIFT-TAB 键向后导航到每个 link。用户也可以使用 K 键在 link 之间导航。另外,用户可以使用NVDA+control+左箭头键逐字向后移动。
这里的关键是通过确保每个 link 具有 href
属性来确保每个 link 都可以通过 TAB 获得焦点。所以 <a>Not really a link</a>
不会被识别为 link 并且不会成为 TAB 焦点。
这是 NVDA 键盘命令的参考 http://community.nvda-project.org/documentation/userGuide.html
如果您想更改默认行为以使 NVDA 读取 links 就像每行只有一个一样,就像 JAWS 所做的那样,请执行以下操作:
- 转到 NVDA 菜单(插入|n)。
- 转到首选项。
- 选择浏览模式。
- 取消选中第二个复选框“支持时使用屏幕布局”。
- 选择确定。
- 返回 NVDA 菜单(插入|n)。
- 选择“保存配置”。如果您不这样做,根据您配置 NVDA 的方式,此更改可能不会在重新启动后持续存在。