[NVDA和JAWS使用react的阅读顺序

Question

[在Firefox上使用NVDA时，它会按行顺序读取反应。如何更改阅读顺序？示例代码：

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

现在它读取一些content1-left，一些content1-right，一些content2-left和一些content2-right，但是我想要一些content1-left，一些content2-left，一些content1-right和一些content2-right。

我使用tabindex，它可以很好地与Tabs一起工作，但是我不想聚焦元素，也不能与箭头键一起使用。请帮助我。

Answer 1

首先，可访问性与you的需求无关，请不要尝试更改预期的行为。

使用屏幕阅读器时，预计在99％的情况下（从您正常阅读页面的方式），项目从左到右，从上到下流动。

想法是屏幕阅读器用户获得与不需要使用屏幕阅读器的用户相同的体验。

关于焦点，如果它是交互式的（可单击的单元格，链接等），则请勿干预。

[如果某物可聚焦，它也应有一个独特的边框（这有助于使用Tab的用户由于出行问题而进行导航，从而知道他们当前光标在您网站上的位置。）-只是一个小技巧，与您的问题无关。

当前的读取顺序正确，请勿干扰。

关于使用可能有用的箭头键，只需使用JavaScript来拦截按键并相应地移动焦点（如果遇到问题，请继续执行并用代码示例发布另一个问题。）

请记住，您还应该为人们提供一种禁用此箭头键行为的方法，因为他们可能已经更改了屏幕阅读器上的键绑定，如果您的JavaScript干扰了他们的首选键绑定，这将导致可访问性问题。

[我不确定您为什么不说您不希望焦点该元素，如果自定义HTML元素首先具有焦点，那么请调整这些元素（因为您必须在其中添加tabindex=0或一些JS首先使这些元素可聚焦的元素，因为<divs>默认情况下是不可聚焦的。）

Answer 2

读取顺序始终与可访问性树中显示的顺序相同，可访问性树是根据DOM构建的。此基本规则不可更改。 CSS对阅读顺序没有影响。

因此，如果您希望逐列而不是逐行读取内容，则别无选择，只能重新排列代码，使其在源中以正确的顺序出现：

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

我让CSS专家告诉您如何实现。