Question

我尝试使用 tabindex ，但它无效

有没有办法在不使用JS交换代码的情况下更改元素读取顺序？

Answer 1

您可以修改HTML代码中div的顺序，然后将其放在flexbox的order属性中。 https://developer.mozilla.org/fr/docs/Web/CSS/order

父母必须display: flex才能使其工作。

这不是最干净的解决方案，但这是一个可以解决问题的解决方案。

Answer 2

你有没有看过aria-flowto？ https://www.w3.org/WAI/GL/wiki/Using_aria-flowto

我没有亲自使用它，但我非常确定这是为了定义可访问应用程序的流顺序。

以下是W3链接的示例：

<h1 aria-flowto="main">The Daily Planet</h1>

<h2> Weather</h2>

<div id="weather" title="Weather" aria-flowto="sports">
    <p> The weather will be what it will be, if you want a forecast look out your window and have a guess. That's what the pros do!
    </p>
</div>

<h2> Election results</h2>

<div id="main" title="Election Results" aria-flowto="weather">
    <p> Whoever you vote for government wins. ANOK 1984</p>
</div>

<h2>Sports</h2>

<div id="sports" title="Sports">
    <p>Today there will be lots of goals scored, tennis played and footballs kicked.</p>
</div>

HTML强制VoiceOver的阅读顺序

2 个答案: