Question

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

仅将role='dialog'添加到覆盖容器后，它会被宣布为对话框，但首先读取文本内容（＆＃34;关闭加载...对话框关闭按钮＆＃34;）。

使用aria-label和aria-labelledby向对话框添加标签时，会出现真正的问题。很好地公布了叠加层（＆＃34;叠加对话框关闭按钮＆＃34;），但是加载后对话框的其他内容都无法访问，只是关闭按钮才是最后一个（和只有）项目可用。

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网址似乎工作正常。

Answer 1

VoiceDver在动态内容和焦点方面非常贴心。这个（如果在任何大小的页面上运行）在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();

向对话框添加标签可防止VoiceOver访问Safari中的动态内容

1 个答案: