NVDA and JAWS reading order using React

Question

When using NVDA on Firefox, it reads in row-wise order in React. How can I change the reading order?

Sample code:

<Row1>
  <row-item-left>{some content1-left}</row-item-left>
  <row-item-right>{some content1-right}</row-item-right>
<Row1>
<Row2>
  <row-item-left>{some content2-left}</row-item-left>
  <row-item-right>{some content2-right}</row-item-right>
<Row2>

Now it reads, "some content1-left, some content1-right, some content2-left, and some content2-right." I want it to read, "some content1-left, some content2-left, some content1-right," and, "some content2-right."

I use tabindex. It's working fine with tabs, but I don't want to focus elements Also it's not working with arrow keys. Please help me on this.

Use `tabIndex={-1}` to prevent tabbing. Also you should consider fixing the DOM order instead — Amin Paks, Nov 08 '19 at 13:07

score 1 · Answer 1 · answered Nov 09 '19 at 09:34

1

The reading order is always the same as it appears in the accessibility tree, and the accessibility tree is built from the DOM. This basic rule can't be changed. CSS has no effect on reading order.

So if you want the content to be read column by column instead of row by row, you have no choice but rearrange your code so that it appears in the right order in the source:

<row-item-left>{some content1-left}</row-item-left> 
<row-item-left>{some content2-left}</row-item-left> 
<row-item-right>{some content1-right}</row-item-right> 
<row-item-right>{some content2-right}</row-item-right>

I leave CSS experts tell you how you can achieve it.

answered Nov 09 '19 at 09:34

QuentinC

12,311
4
24
37

In this case thought I think the advice given is incorrect. He would have to wrap the two left items in a div and the two row right row items in a div and float the two containing divs left. This then goes against WCAG on 'logical tab order' as you would jump up and down the page (imagine 20 rows). I know it seems like I am criticising but I am not, I enjoy seeing your answers (and normally don't answer if you have as your questions hit the nail on the head!) – GrahamTheDev Nov 09 '19 at 09:49
I don't think it's contradicting WCAG. The only important thing is to have the same read and tab order. IF you see that you have to read column by column, then your sight will also jump, and you will expect that tab order will do the same. The jump wouldn't be unexpected. Something illogical would be a column-wise read order and a row-wise tab order, what is feasible only with positive tabindex (hance tabindex>=1 is forbidden) – QuentinC Nov 09 '19 at 16:00
some good points there, always hard to give advice when you don't know the use case, I think I had focused on his original layout when I said the above. – GrahamTheDev Nov 10 '19 at 12:46

score 0 · Answer 2 · answered Nov 09 '19 at 09:13

Firstly accessibility isn't about what you want, never try to change expected behaviour.

When using a screen reader it is expected that items flow from left to right, top to bottom in 99% of cases (the way you would read the page normally).

The idea is that a screen reader user gets the same experience as someone who does not need to use one.

With regards to focus, never interfere with that either if it is something that is interactive (a clickable cell, link etc.).

If something is focusable it should also have a distinctive border (this helps users who use tab to navigate due to mobility issues know where their current cursor is placed on your site.) - just an extra tip, not relevant to your question.

The current read order is correct, do not interfere with it.

With regards to using arrow keys that may be useful, just use JavaScript to intercept the key presses and move focus accordingly (give that a go and post another question with a code example if you get stuck.)

Bear in mind you should also provide a way for people to disable this arrow key behaviour as they may have changed the key bindings on their screen reader and that would cause accessibility issues if your JavaScript interferes with their preferred key bindings.

I am not sure why you said you don't want to focus the element, if your custom HTML elements have focus in the first place then adjust those elements (as you must have added a tabindex=0 or some JS to those elements in the first place to make them focusable as <divs> are not focusable by default.)

NVDA and JAWS reading order using React

2 Answers2