Bootstrap 3手风琴展开/折叠在启用iPad屏幕阅读器的情况下停止工作

我们使用的是Bootstrap3（v3.3.5）手风琴，在iPad（iOS v9.1）上启用屏幕阅读器之前，它工作正常。启用屏幕阅读器后，对于标签较短的手风琴（占可用空间小于50%的标签），手风琴将不再展开/折叠。当屏幕在横向和纵向之间旋转时，较短的标签问题是一致的。该问题可以通过使标签超过可用空间的50%或使其居中来纠正。不幸的是，集中或扩展标签不是我们团队的选择

这似乎是引导3的问题，而不是引导2的问题。我在这里指出了bootstrap 2手风琴的例子（）并在iPad上启用了屏幕阅读器，效果很好。然后，我在这里指向bootstrap 3手风琴示例（）并在iPad上启用了屏幕阅读器，但它无法展开/折叠手风琴

是否有人找到了修复方法或其他解决方法？也许，我们缺少一个属性来修复问题或其他东西

下面是我们在手风琴中使用的代码：

<div class="row" id="A">
  <div class="col-md-12 col-sm-12 col-xs-12 content">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

      <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingA">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentA" aria-expanded="false" aria-controls="contentA">This label is to short for any screen
          <span class="sr-only sr-only-focusable" id="toggleA">show content</span>
        </a>
      </h4>
    </div>
    <div id="contentA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
      <div class="panel-body">
        <p>This label is to short to expand/collapse this content on any iPad screen with the screen reader enabled.</p>
      </div>
    </div>
      </div> 

      <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingB">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentB" aria-expanded="false" aria-controls="contentB">This label works on portrait/landscape screen and will expand/collapse accordion
          <span class="sr-only sr-only-focusable" id="toggleB">show content</span>
        </a>
      </h4>
    </div>
    <div id="contentB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB">
      <div class="panel-body">
        <p>This label is long enough to expand/collapse this content on the iPad portrait and landscape screens with the screen reader enabled.</p>
      </div>
    </div>
      </div>

      <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingC">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentC" aria-expanded="false" aria-controls="contentC">This label works on portrait screen not landscape
          <span class="sr-only sr-only-focusable" id="toggleC">show content</span>
        </a>
      </h4>
    </div>
    <div id="contentC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingC">
      <div class="panel-body">
        <p>This label is long enough to expand/collapse this content on the iPad portrait screen but not the landscape with the screen reader enabled.</p>
      </div>
    </div>
      </div>

    </div> <!-- End panel group -->
  </div>
</div>

此标签为短标签，用于在任何启用屏幕阅读器的iPad屏幕上展开/折叠此内容

此标签足够长，可以在启用屏幕阅读器的iPad纵向和横向屏幕上展开/折叠此内容

此标签足够长，可以在iPad纵向屏幕上展开/折叠此内容，但不能在启用屏幕阅读器的情况下展开/折叠横向内容

---

谢谢

这可能与以下错误有关：

标题（H4）中的锚混淆了画外音（VO），这：

• 使VO将VO光标放置在H4和锚上
• 不读取锚点上的任何aria属性
• 断开标准VO空格键交互

---

当你说“它失败了”时，你在屏幕上做什么动作？一个水龙头？双击？双击。只需轻轻一按，即可读取标签。双击读取标签，而不是展开/折叠内容。此问题最终由团队中的某个人解决。它与aria属性相关联。他们删除了这些属性，它开始工作。role=“tablist”、role=“tabpanel”和role=“tab”。他们还删除了aria multiselectable=“true”，但我认为这没有任何影响。谢谢。我试过这个，但它仍然不允许手风琴扩展。结果证明这与aria属性有关。我在上面列出了问题属性。