html - 向对话框添加标签会阻止 VoiceOver 访问 Safari 中的动态内容

Question

我已经创建了一个在打开后动态加载内容的叠加层，但在尝试添加 ARIA 属性时我在 Safari 中遇到了 VoiceOver 问题。

仅向覆盖容器添加role='dialog' 后，它被宣布为对话框，但首先读取文本内容(“关闭加载...对话框关闭按钮”)。

当使用 aria-label 和 aria-labelledby 向对话框添加标签时，真正的问题出现了。叠加层被很好地宣布(“叠加层对话框关闭按钮”)，但是对话框的其余内容在加载后无法访问，而且关闭按钮似乎是最后一个(也是唯一的)可用项目。

HTML:

<div id="page">
  <a id="opendialog" href="#" role="button">Open</a>
</div>

JavaScript:

jQuery(function ($) {
  $('#opendialog').click(function (event) {
    event.preventDefault();

    // Attach the dialog container to the page with a loading placeholder.
    $dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label">' +
                  '<span id="dialog-label">Overlay</span>' +
                  '<a href="#" class="close" role="button">close</a>' +
                  '<div class="content"><span class="loading">Loading...</span></div>' +
                '</div>')
      .insertAfter('#page');
    $dialog.find('.close').focus();

    // Hide the other page contents to trap the user in the dialog.
    $('#page').hide();

    $dialog.find('.close').click(function (event) {
      event.preventDefault();

      $dialog.remove();
      $('#page').show();
      $('#opendialog').focus();
    });

    // Simulate an asynchronous request for the dialog contents.
    setTimeout(function () {
      $dialog.find('.content .loading')
        .replaceWith('<div>Dialog Content</div>');
    }, 250);

  });
});

http://codepen.io/gapple/pen/FGhzl

Chrome 在 iframe 中似乎也有一些奇怪的代码笔问题，但直接加载 iframe url 似乎工作正常。

Answer 1

在动态内容和焦点方面，VoiceOver 非常挑剔。这(如果在任何大小的页面上运行)在 iOS 上根本不起作用，因为动态内容上的 .focus() 不起作用，除非在至少 500 毫秒的超时内执行(看这里http://unobfuscated.blogspot.com/2013/08/messed-up-ios-focus-management-with.html)。

但是，对于 OS X，您可以通过关注对话框本身而不是关闭按钮来解决您的问题。这是经过修改的代码片段，因此可以正常工作。焦点位于对话框上后，按 CTRL-OPTION DOWN 与对话框内容进行交互

$dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label" tabindex="-1">' +
              '<span id="dialog-label">Overlay</span>' +
              '<a href="#" class="close" role="button">close</a>' +
              '<div class="content"><span class="loading">Loading...</span></div>' +
            '</div>')
  .insertAfter('#page')
  .focus();