ios - 辅助功能:对讲将自动朗读对话内容。但是 NVDA 和 VoiceOver 不会读取

Question

我已经为弹出窗口实现了 Bootstrap(3.3.7) 模式。当从关闭图标开始加载时，Talkback 将自动读取模态的内容。

但是，在 VoiceOver 中它不会。在 VoiceOver 中，当模式打开时，焦点将移动到第一个交互元素，如按钮(关闭按钮)。

<div class="modal fade in" id="alertID" tabindex="0" role="dialog" aria-hidden="false">
   <div class="modal-dialog" id="leaving-modal-content" role="document">
      <div class="modal-content leaving-site-content">
          <button aria-label="Close Dialog – button" class="close-icon" data-dismiss="modal"><i class="fa fa-times"></i></button>
          <h2 class="headline-text11"><span class="large-modal-text1">Example Title</span>
          </h2>
        <p class="body-copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <ul class="list-inline">
            <li><a href="http://www.google.com/" id="link-continue" title="Continue" class="btn btn-red" target="_self">Continue</a></li>
            <li><a href="#" data-dismiss="modal" title="Cancel" class="btn btn-red">Cancel</a></li>
        </ul>
    </div>
  </div>
</div>

如果有人能想出解决办法。这将是一个很大的帮助。 @slugolicious 我已经从你那里得到了几次解决方案。

请帮帮我。

提前致谢:)

Answer 1

不确定这是否会影响任何事情，但我通常不会输入 tabindex="0"在对话框本身。我用 tabindex="-1"这样我就可以以编程方式将焦点发送到那里，但用户无法跳转到对话框边框本身。

此外，VoiceOver 有时会遇到 display:none 对话框的问题> display:block而不是 visibility:hidden > visibility:visible .也就是说，如果您最初使用 display:none 隐藏对话框, 然后通过设置 display:block 取消隐藏它，有时 VoiceOver 不会将焦点移动到对话框中的第一个元素。请参阅 Scott O'Hara 博客中的“Additional Gotchas to watch out for”。如果您最初使用 visibility:hidden 隐藏然后通过设置 visibility:visible 取消隐藏，效果更好。但这只是 VoiceOver 的问题，并且只与移动 VoiceOver 焦点有关。

但是，我认为主要问题是您的对话框没有标签或描述。您在对话框中有一个标题，但对话框本身应指向该标题。只需在 <h2> 中添加一个 ID然后在 aria-labelledby 中引用该 ID对话框的属性。

如果您的对话框中有其他描述对话框用途的文本，您可以在该描述上放置一个 ID，然后通过添加 aria-describedby 来引用它。也到对话框。与 aria-labelledby 非常相似.在下面的示例中，我将使用“lorem ipsum”段落作为描述。

类似于:

<div class="modal fade in" id="alertID" tabindex="-1" role="dialog" aria-hidden="false" aria-labelledby="newID1" aria-describedby="newID2">
  <div class="modal-dialog" id="leaving-modal-content" role="document">
    <div class="modal-content leaving-site-content">
      <button aria-label="Close Dialog – button" class="close-icon" data-dismiss="modal">
        <i class="fa fa-times"></i>
      </button>
      <h2 id="newID1" class="headline-text11">
        <span class="large-modal-text1">Example Title</span>
      </h2>
      <p id="newID2" class="body-copy">Lorem Ipsum...</p>
      ...