VoiceOver 专注于咏叹调隐藏元素

如何解决VoiceOver 专注于咏叹调隐藏元素

在我们的 (Vue.js v.2) 网页上，您可以在卡片之间滑动，或按“向左”和“向右”按钮。这个滑动部分是用 vanilla JS 编写的，没有花哨的库。为了在滑动时让相邻的可见，我需要让它们在 DOM 树中都可见，但对查看器隐藏它们。我已经做到了，所以所有未聚焦的卡片都是 aria-hidden，并且在使用 ChromeVox 时效果很好。问题是，在使用 VoiceOver 时，我单击“右”按钮，然后立即向下按 Tab 键到卡片，它会读出左侧的卡片，并且由于卡片是 aria 隐藏的，因此也会被困在那里。从代码角度来看，从 aria-visible 到 aria-hidden 的更改会在按下按钮后立即发生，但似乎 VoiceOver 已经决定，当我关注“右”按钮时，下一个元素应该是卡 5（例如）。如果我在单击“右”按钮后等待大约 1 或 2 秒，它会更改“下一个”元素，并在我按下 Tab 键时聚焦于正确的元素（卡片 6）。有没有办法解决这个问题，所以它只会关注 aria-visible 元素？也许是一种“强制刷新”VoiceOver 元素堆栈接下来要阅读的方法？也许如果我在单击按钮时删除正在读出的消息，它会立即刷新？我仍然没有找到做这些事情中的任何一件。 I created a low quality flowchart to illustrate the problem better。我想要的是让它表现得像 ChromeVox。

我已经尝试了几种方法来让它现在起作用，感觉就像是 VoiceOver 的一个错误。我尝试过的一些（绝望的）尝试：设置 tabindex=-1，role=presentation，在卡片之间导航时动态更改“右”按钮的 ID，创建一个空 div，其下方有一个动态 ID按钮，使用 aria-flowto，在“下一个”元素上动态设置 aria-describedby，以及这些和其他一些我不记得的东西之间的不同变化。

解决方法

最终我找到了一个可行的解决方案。我对此不太满意，但总比没有好。我所做的是在卡片中制作标题 aria-hidden，并在商店中创建一个 currentHeader 变量。我在滑动部分上方创建了一个 sr-only & aria-visible 标题，其中 v-html 指向 currentHeader 变量。这样，“右”按钮的“下一个”元素将始终是相同的元素，但单击按钮后内容会发生变化。这不是一个完美的解决方案，并且出于某种原因，当单击按钮后尝试立即转到下一个元素时，它会使 VoiceOver“停止”，但至少用户不会阅读错误的文本并被困住。这是一个伪代码说明，如果我的解释令人困惑，我是如何做到的：

// old solution                                  // old swiping-section
<button id="left" />                             <div v-for="element in elements" />
<button id="right" />                              <h3 v-html="element.title" />
<swiping-section />                                <p v-html="element.desc" />
                                                 </div>

// new solution                                   // new swiping section
<button id="left" />                              <div v-for="element in elements" />
<button id="right" />                               <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" />       <p v-html="element.desc" />
<swiping-section />                               </div>

如果有人找到更好的方法，请发布您的解决方案。