在我们的(Vue.js v.2(网页上，我们有一个部分，您可以在卡片之间滑动，也可以按"左"；以及"；右"；按钮这个滑动部分是用香草JS编写的，没有花哨的库。为了在滑动时使相邻的部分可见，我需要使它们在DOM树中都可见，但对查看器隐藏它们。我已经做了它，所以所有的非聚焦卡都是aria-hidden，并且在使用ChromeBox时效果很好。问题是当使用VoiceOver时；右"；按钮，并立即向下标签到卡片，它会读出左边的卡片，也会被困在那里，因为卡片是隐藏的咏叹调。在代码方面，一旦按下按钮，就会发生从aria-visible到aria-hidden的变化，但VoiceOver似乎已经决定，当我专注于"；右"；按钮，下一个元素应该是卡片5(例如(。如果我在点击"；右"；按钮，它将改变"；下一个"；元素，并在我按下标签时将注意力集中在正确的一张(卡6(上。有没有办法绕过这个问题，所以它只关注aria-visible元素？也许是一种"；强制刷新"；VoiceOver下一步要读取的元素堆栈？也许如果我在点击按钮时删除正在读取的消息，它会立即刷新？我仍然没有找到做这两件事的方法。我创建了一个低质量的流程图来更好地说明这个问题。我想要的是让它表现得像ChromeBox。
我已经尝试了几种方法来实现这一点，感觉这是VoiceOver的一个bug。我尝试过的一些(绝望的(尝试：设置tabindex=-1、role=presentation、更改"的ID；右"；当我在卡片之间导航时，使用aria-flowto动态设置aria-describedby，在按钮下方创建一个动态ID的空div；下一个"；元素，以及这些和其他一些我不记得的东西之间的不同变化。
最终我找到了一个可行的解决方案。我对此不太高兴，但总比什么都没有好。我所做的是在卡片中制作标题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>
如果有人找到更好的方法，请发布您的解决方案。