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

I am facing a problem with the NVDA screen reader, in which it will teach all the elements in the same section in the same line.

For example, with the following code:

  & Lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Title & gt; Title & lt; / Title & gt; & Lt; Style & gt; NAV & gt; UL & gt; Li {list-style: none; Display: inline-block; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; H1 & gt; Title 1 & lt; / H1> & Lt; Nav role = "navigation" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

This will display all navigation links in a row, which is visually correct, but NVDA in browse mode, when scroll through arrow keys, then read all the links together Can not go between individual links, which means that it is impossible to stay on one and choose it.

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

  & lt; P & gt; NVDA & lt; A href = "#" & gt; This link & lt; / A & gt; So a user can choose it. & Lt; / A & gt;  

In my navigation example, by changing the style, each link is on a separate row:

  nav> UL & gt; Li {list-style: none; Display area; }  

Fixes the problem for NVDA - The user can go in the middle of the link - but he is visually wrong.

The only method which I found to be visually right and forcefully is to display each anchor as a block inside the list item to read it separately: NVDA:

  Nav> UL & gt; Li {list-style: none; Display: inline-block; } NAV & gt; UL & gt; Le & gt; A {display: block; }  

But this hack seems and there is no solution in every situation (it will not work within paragraphs for example).

Is there any specialty that I can add, or is NVDA another better way to read each element separately?

This problem is in all browsers.

You do not need to do anything, users can navigate to each link and activate them Could. Users can interrupt reading at any point with the control key. After the link has been read, the user can use the SHIFT-TAB key to move behind each link. Apart from this, users can use the K key to navigate between the links. In addition, user users can move word-by-word backwards using NVDA + Control + Left Arrow Keys.

The key here is to ensure that each link is noticeable with tabs to ensure that it href attribute & lt; A & gt; There really is no link & lt; / A & gt; will not be identified as a link and will not be focused on tabs.

Here is a reference to the keyboard NVDA

If you want to change the default behavior for reading NVDA, as if there was only one per line, as JAWS does , Then do the following:

1. Go to
2. Select the browse mode.
3. Uncheck the second check box, "Use the screen layout when supported.
4. Choose OK.
5. Go back to the NVDA menu (enter | n ).
6. Select "Save Configuration." If you do not do this, it is up to you that NVDA is configured, depending on whether this change can be restarted.
< / Ol>