如何分别在同一行上制作NVDA读取元素?
我在使用NVDA屏幕阅读器时遇到问题,因为它将在一个块中读取同一行上的所有元素。
例如,使用以下代码:
<!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>
这将在一行中显示所有的导航链接,这在视觉上是正确的,但NVDA在浏览模式下用箭头键滚动浏览时,将会读取所有链接。 用户不能在每个单独的链接之间移动,这意味着不可能停留在一个并选择它。
段落中间的链接也是如此:
<p>NVDA will not stop on <a href="#">This link</a> so a user can select it.</a>
在我的导航示例中,更改样式以便每个链接位于不同的行上:
nav > ul > li {
list-style: none;
display:block;
}
解决了NVDA的问题 - 用户可以在链接之间移动 - 但在视觉上是错误的。
我发现使视觉更正并强制NVDA单独读取它的唯一方法是在列表项中显示每个锚点作为块:
nav > ul > li {
list-style: none;
display:inline-block;
}
nav > ul > li > a {
display: block;
}
但这种感觉很不好,在任何情况下都不是解决方案(例如,这在段落内不起作用)。
有没有我可以添加的属性,或者其他更好的方法来使NVDA分别读取每个元素?
这个问题遍布所有浏览器。
您不需要执行任何操作,用户可以导航到每个链接并激活它们。 用户可以用CONTROL键在任何时候中断读数。 在阅读链接之后,用户可以使用SHIFT-TAB键向后导航到每个链接。 用户也可以使用K键在链接之间导航。 另外,用户可以使用NVDA +控制+左箭头键逐字向后移动。
这里的关键是通过确保每个链接具有href
属性来确保每个链接都可以通过TAB进行关注。 因此, <a>Not really a link</a>
不会被识别为链接,并且不会是TAB可对焦的。
以下是NVDA键盘命令的参考http://community.nvda-project.org/documentation/userGuide.html
如果您想更改默认行为以使NVDA读取链接,就像每行只有一个一样,就像JAWS一样,请执行以下操作:
上一篇: How can I make NVDA read elements on the same row separately?
下一篇: Jaws screen reader scrolling function issue when reading pdf