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

Question

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.

unobf · Accepted Answer · 2015-01-23T14:29:37.197

5

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.

edited Jan 23 '15 at 14:29

answered Jan 23 '15 at 11:56

unobf

7,158
1
23
36

This is a requirement from our client, and raised by a tester who is visually impaired and expects to be able to browse through the links with the arrow key as described. – Paul T Davies Jan 23 '15 at 12:18
This is not a valid accessibility issue that is being raised by your tester – unobf Jan 23 '15 at 12:23
The client isn't happy with it, and I don't think it's an unreasonable issue. It does make for a poor user experience. – Paul T Davies Jan 23 '15 at 13:03
It is just the way the screen reader works. If you want a professional opinion to convince the client, then companies like http://www.deque.com will be able to help – unobf Jan 23 '15 at 13:53
Just added instructions on how to configure NVDA to work like JAWS – unobf Jan 23 '15 at 14:30
That's what I'm after. Would be good to have some way to force this behavior though. Maybe detect screen reader and force links onto different lines. – Paul T Davies Jan 23 '15 at 17:04
unfortunately, while detecting screen readers is possible, it is widely considered a privacy violation to do it – unobf Jan 23 '15 at 18:29
Also, it's the this end of the wedge. One minute you're detecting SRs to do a slight design modification, the next you're issuing separate 'text-only' pages. – Paul T Davies Jan 25 '15 at 10:30

bytesnz · Answer 2 · 2022-11-21T02:28:41.690

Changing the display properties on ul and li changes the way NVDA will read out the list. From what I have seen so far, changing either of them to things like inline and inline-block will cause NVDA to read them as it would a paragraph (with a "list with x items" at the start), pausing after a certain number of words in the default configuration.

To get it to work with an inline list, you can use display: flex on the ul element

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

You can also use display: block; float: left on both the ul element and li elements

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

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

2 Answers2