accessibility - 正确隐藏键盘和屏幕阅读器的内容

Question

我们在页面上有一个模式，当隐藏时，我们希望键盘用户无法通过 Tab 键进入内容，也无法让屏幕阅读器阅读。

为了解决这个问题，我在父 DIV 上进行了设置，以便在隐藏时它具有以下内容:

<div aria-hidden="true" tabindex="-1">
    [child HTML/content]
<div>

不幸的是，这不起作用。您仍然可以通过 Tab 键进入内容并阅读内容(至少通过 Chrome 并使用 VoiceOver)。

理想情况下，我们还设置了 display: none——我也许可以做到这一点——但目前我们依赖于一些 CSS 过渡动画，所以需要设置它动画后以编程方式进行。

但是，在走这条路之前，我最初的理解中是否缺少任何东西，即 aria-hidden 和 tabindex 应该解决这个问题？

Answer 1

简短回答

使用display:none没有过渡将是最好的选择，并且不需要 aria-hidden .

如果您需要进行转换，请进行转换，然后设置 display: none转换后的属性。

要小心失去焦点，但如果您的转换时间超过 100 毫秒，则必须进行大量焦点管理来解决设置 display:none 的延迟。 .

更长的答案

aria-hidden="true"从可访问性树中删除项目及其子项。但是，它不会阻止可以接收焦点的子项(即 <input> )接收焦点。

tabindex="-1"不会从已经可聚焦的子元素上移除焦点。

解决所有问题的最简单方法是删除过渡并简单地切换显示属性。这不仅解决了您的注意力问题，而且还消除了 aria-hidden 的需要。 ，让事情变得更简单。

话虽如此，过渡可能是您规范的一部分并且是不可避免的。如果是这种情况，则需要考虑一些事项。

在我们的评论讨论和您的问题中，您提到使用 setTimeout转换完成后将显示属性设置为无。

根据您的设计，此方法存在问题。

如果下一个制表位位于要隐藏的区域内，则在转换期间有人可能导航到要隐藏的区域内的元素。

如果发生这种情况，页面上的焦点将会丢失。根据浏览器的不同，这可能会导致焦点返回到页面顶部。这是非常令人沮丧的事情，并且也可能构成 WCAG 原则中逻辑选项卡顺序/稳健性的失败。

实现隐藏动画的最佳方法是什么？

由于焦点问题，我建议使用以下过程来隐藏带有过渡的内容:-

1. 第二个导致区域隐藏的按钮/代码被激活(淡出前)设置 tabindex="-1" <div> 内的所有交互元素要隐藏(或者如果它们是输入，则设置 disabled 属性)。
2. 通过您使用的任何方式开始转换(即将类添加到将触发转换的项目中)。
3. 转换完成后，设置 display: none在该项目上。
4. 如果您希望创建 <div>，则执行完全相反的操作再次可见。

通过这样做，您可以确保没有人会意外进入 div 并失去焦点。这可以帮助所有依赖键盘进行导航的人，而不仅仅是屏幕阅读器用户。

下面是如何实现此目的的一个非常粗略的示例。它可以根据容器的 ID 进行重用，因此希望能为您提供一个良好的起点，让您可以编写一些更健壮的内容(而且不那么难看!呵呵)

我已添加评论以尽我所能进行解释。我已将过渡设置为 2 秒，以便您可以检查并查看事物的顺序。

最后，我添加了一些 CSS 和 JS，以考虑到那些表示由于运动敏感性而更喜欢减少运动的人。在本例中，动画时间设置为 0。

说明隐藏项目以管理 tabindex 并在再次可见时恢复 tabindex 的粗略示例。

var content = document.getElementById('contentDiv');
var btn = document.getElementById('btn_toggle');
var animationDelay = 2000;

//We should account for people with vestibular motion disorders etc. if they have indicated they prefer reduced motion. We set the animation time to 0 seconds.
var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
  if (motionQuery.matches) {
    animationDelay = 0;
  } else { 
    animationDelay = 2000;
  }
}
motionQuery.addListener(handleReduceMotionChanged);
handleReduceMotionChanged();



//the main function for setting the tabindex to -1 for all children of a parent with given ID (and reversing the process)
function hideOrShowAllInteractiveItems(parentDivID){  
  //a list of selectors for all focusable elements.
  var focusableItems = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', '[tabindex]:not([disabled])', '[contenteditable=true]:not([disabled])'];
  
  //build a query string that targets the parent div ID and all children elements that are in our focusable items list.
  var queryString = "";
  for (i = 0, leni = focusableItems.length; i < leni; i++) {
    queryString += "#" + parentDivID + " " + focusableItems[i] + ", ";
  }
  queryString = queryString.replace(/,\s*$/, "");
      
  var focusableElements = document.querySelectorAll(queryString);      
  for (j = 0, lenj = focusableElements.length; j < lenj; j++) {
            
    var el = focusableElements[j];
    if(!el.hasAttribute('data-modified')){ // we use the 'data-modified' attribute to track all items that we have applied a tabindex to (as we can't use tabindex itself).
            
      // we haven't modified this element so we grab the tabindex if it has one and store it for use later when we want to restore.
      if(el.hasAttribute('tabindex')){
        el.setAttribute('data-oldTabIndex', el.getAttribute('tabindex'));
      }
              
      el.setAttribute('data-modified', true);
      el.setAttribute('tabindex', '-1'); // add `tabindex="-1"` to all items to remove them from the focus order.
              
    }else{
      //we have modified this item so we want to revert it back to the original state it was in.
      el.removeAttribute('tabindex');
      if(el.hasAttribute('data-oldtabindex')){
        el.setAttribute('tabindex', el.getAttribute('data-oldtabindex'));
        el.removeAttribute('data-oldtabindex');
      }
      el.removeAttribute('data-modified');
    }
  }
}



btn.addEventListener('click', function(){
  contentDiv.className = contentDiv.className !== 'show' ? 'show' : 'hide';
  if (contentDiv.className === 'show') {
     content.setAttribute('aria-hidden', false);
    setTimeout(function(){
      contentDiv.style.display = 'block';
      hideOrShowAllInteractiveItems('contentDiv');
    },0); 
  }
  if (contentDiv.className === 'hide') {
      content.setAttribute('aria-hidden', true);
      hideOrShowAllInteractiveItems('contentDiv');
    setTimeout(function(){
      contentDiv.style.display = 'none';
    },animationDelay); //using the animation delay set based on the users preferences.
  }
});

@keyframes in {
  0% { transform: scale(0); opacity: 0; visibility: hidden;  }
  100% { transform: scale(1); opacity: 1; visibility: visible; }
}

@keyframes out {
  0% { transform: scale(1); opacity: 1; visibility: visible; }
  100% { transform: scale(0); opacity: 0; visibility: hidden;  }
}

#contentDiv {
  background: grey;
  color: white;
  padding: 16px;
  margin-bottom: 10px;
}

#contentDiv.show {
  animation: in 2s ease both;
}

#contentDiv.hide {
  animation: out 2s ease both;
}


/*****We should account for people with vestibular motion disorders etc. if they have indicated they prefer reduced motion. ***/
@media (prefers-reduced-motion) {
  #contentDiv.show,
  #contentDiv.hide{
    animation: none;
  }
}

<div id="contentDiv" class="show">
  <p>Some information to be hidden</p>
  <input />
  <button>a button</button>
  <button tabindex="1">a button with a positive tabindex that needs restoring</button>
</div>

<button id="btn_toggle"> Hide Div </button>