How can I make NVDA read elements on the same row separately?

 

I am having a problem with NVDA screen reader, in that it will read all elements out on the same line in one block.

For example, with the following code: 

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

This will display all navigation links in a row, which is visually correct, but NVDA, in browse mode, when scrolling through with the arrow keys, will read all the links together. The user cannot move between each individual link, meaning it is impossible to stay on one and select it.

The same happens with a link in the middle of a paragraph: 

<p>NVDA will not stop on <a href="#">This link</a> so a user can select it.</a>

In my navigation example, changing the style so each link is on a separate line: 

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

Fixes the problem for NVDA - the user can move between links - but is visually wrong.

The only way I have found to make it visually correct and force NVDA to read it separately is to display each anchor as a block inside the list item: 

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

        nav > ul > li > a {
            display: block;
        }

But this feels hacky and is not a solution in every situation (this will not work within a paragraph for example).

Is there an attribute I can add, or any other better way to make NVDA read each element separately?

This issue is across all browsers.

You do not need to do anything, the user can navigate to each link and can activate them. The user can interrupt the reading at any point with the CONTROL key. Also after the link has been read, the user can use the SHIFT-TAB key to navigate backwards to each link. Also the user can use the K key to navigate between links. In addition, the user can use the NVDA+control+leftArrow key to move backwards word-by-word.

The key here is to ensure that each link is focusable with the TAB by ensuring that it has an href attribute. So <a>Not really a link</a> will not be identified as a link and will not be TAB focusable.

Here is a reference for the keyboard commands for NVDA http://community.nvda-project.org/documentation/userGuide.html

If you want to change the default behavior to make NVDA read links as if there were only one per line, as JAWS does, do the following:

  • Go to the NVDA menu (insert|n).
  • Go to preferences.
  • Choose Browse mode.
  • Uncheck the second check box, “Use screen layout when supported.”
  • Choose OK.
  • Go back to the NVDA menu (insert|n).
  • Choose “save configuration.” If you don't do this, depending on how you have NVDA configured, this change might not persist across restarts.
    • 链接地址: http://www.djcxy.com/p/50480.html

    上一篇: 不读取AjaxToolkit模式弹出窗口的屏幕阅读器

    下一篇: 如何分别在同一行上制作NVDA读取元素？