如何让NVDA逐个阅读同一行上的元素？

Question

如何让NVDA逐个阅读同一行上的元素？

4

我在使用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分别读取每个元素呢？

这个问题在所有浏览器中都存在。

- Paul T Davies

2个回答

0

更改 ul 和 li 上的 display 属性会改变 NVDA 读取列表的方式。从我目前看到的情况来看，将它们中的任何一个更改为像 inline 和 inline-block 这样的东西会导致 NVDA 将它们读作段落（在开头有“x项列表”），在默认配置下在一定数量的单词后暂停。

要使其与内联列表配合使用，可以在 ul 元素上使用 display: flex

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <style>
        nav > ul {
            display: flex;
        }

        nav > ul > li {
            list-style: none;
        }   

        </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>

你也可以在 ul 元素和 li 元素上同时使用 display: block; float: left

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <style>
        nav > ul {
            display: flex;
        }

        nav > ul > li {
            display: block;
            float: left;
        }   

        </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>

- bytesnz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- unobf · Accepted Answer

您不需要做任何事情，用户可以浏览每个链接并激活它们。用户可以使用 CONTROL 键随时中断阅读。在链接已被阅读后，用户可以使用 SHIFT-TAB 键向后浏览每个链接。此外，用户还可以使用 K 键在链接之间导航。另外，用户可以使用 NVDA+control+leftArrow 键逐字向后移动。

关键是要确保每个链接都可以使用 TAB 进行聚焦，确保它具有 href 属性。因此，<a>Not really a link</a> 不会被识别为链接，并且不会进行 TAB 聚焦。

这里有一个NVDA键盘命令的参考资料：http://community.nvda-project.org/documentation/userGuide.html 如果您想更改默认行为，使 NVDA 读取链接时就像 JAWS 一样，每行只有一个，请执行以下操作：

转到 NVDA 菜单（insert|n）。
选择首选项。
选择浏览模式。
取消选中第二个复选框“支持时使用屏幕布局”。
选择“确定”。
返回 NVDA 菜单（insert|n）。
选择“保存配置”。如果您不这样做，根据您如何配置 NVDA，此更改可能无法跨重启持久保存。