辅助功能：Talkback 会自动读取对话内容。但是 NVDA 和 VoiceOver 不会读取

Posted 2023-03-12

【中文标题】辅助功能：Talkback 会自动读取对话内容。但是 NVDA 和 VoiceOver 不会读取

【英文标题】：Accessibility: Talkback will read contents of dialog automatically. But NVDA and VoiceOver will not read

【发布时间】：2018-10-17 12:28:46

【问题描述】：

我已经为弹出窗口实现了 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 我已经从你那里得到了几次解决方案。

请帮帮我。

提前致谢:)

【参考方案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>
      ...

【讨论】：

我需要澄清一下。通常当我打开对话框时。无论使用不同的屏幕阅读器，屏幕阅读器应该如何阅读？它应该自动阅读内容还是滑动阅读？

你不应该做任何事情。如果焦点放在对话框中的某些内容上，则应读取对话框标题（aria-label），然后读取包含焦点的任何内容。整个对话框不必在打开时必须阅读。用户可以通过浏览对话框来做到这一点。

我尝试了上面的代码以获得完整的对话框可读性。它适用于 NVDA，但不适用于 VoiceOver。有没有其他可能的方法来实现它。