我在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 + control + leftArrow键逐字向后移动。

此处的关键是通过确保每个链接都具有href属性来确保TAB可聚焦。因此,<a>Not really a link</a>将不会被标识为链接,并且不会成为TAB焦点。

这是NVDA http://community.nvda-project.org/documentation/userGuide.html的键盘命令的参考

如果要更改默认行为以使NVDA读取链接就像JAWS一样,每行只有一个,请执行以下操作:

  • 转到NVDA菜单(插入| n)。
  • 转到首选项。
  • 选择浏览模式。
  • 取消选中第二个复选框“支持时使用屏幕布局”。
  • 选择确定。
  • 返回NVDA菜单(插入| n)。
  • 选择“保存配置”。如果您不这样做,则取决于您如何配置NVDA,此更改可能不会在重新启动后持续存在。
  • 09-30 11:51