首页 文章

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

提问于
浏览 次
2

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

仅将 role='dialog' 添加到覆盖容器后，它将被宣布为对话框，但首先读取文本内容（"close loading... dialog close button"） .

使用 aria-label 和 aria-labelledby 向对话框添加标签时，会出现真正的问题 . 覆盖很好地宣布（"Overlay dialog close button"），但是在加载后对话框的其他内容是不可访问的，并且只显示关闭按钮是可用的最后一个（也是唯一的）项目 .

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

在iframe中，Chrome似乎也有一些奇怪的问题，但直接加载iframe网址似乎工作正常 .

html safari accessibility voiceover

1 回答

  • 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();
    回复于

相关问题