“[aria-hidden="true"] 元素包含可聚焦的后代”；解决这个问题的最佳方法是什么？

Question

我有一个简单的手风琴：

<div>
  <button aria-expanded='false' aria-controls='content'>
    Open accordion
  </button>
  <div id='content' aria-hidden='true'>
    This the accordion's hidden content.
  </div>
</div>

我使用 Javascript 打开/关闭手风琴并设置标签aria-*。

一切正常，但是当我在内容中添加链接时：

<div>
  <button aria-expanded='false' aria-controls='content'>
    Open accordion
  </button>
  <div id='content' aria-hidden='true'>
    This is the accordion's hidden content.
    <a href='https://www.google.com'>Go to Google</a>
  </div>
</div>

灯塔给了我这个：

[aria-hidden="true"] elements contain focusable descendents

在我看来，添加tabindex='-1'到a标签可以解决这个问题：

[aria-hidden="true"] elements contain focusable descendents

然而，这使得元素“不可选项卡”，这不利于可访问性。

我可以使用 JavaScript 手动查询手风琴内容中的所有a标签，但我什至不确定这是否真的解决了“问题”还是一个肮脏的解决方法？还有更好的选择吗？

Answer 1

为什么你会收到这个警告？

此警告表明，尽管您使用aria-hidden="true"大多数屏幕阅读器，aria-hidden="true"但如果子项可以接收焦点（考虑到开发人员错误、JavaScript 未正确加载等），则父项将被忽略。

如何修复它？

我假设您正在使用类似幻灯片动画或类似的东西，这就是您不简单地display: none在内容上使用的原因。

如果您不使用动画，则只需使用display: none应用时的内容aria-hidden="true"（@Adam 在他的回答中向您展示了执行此操作的完美方法）。

更好的是，您可以直接display: none在 div 上使用，因为这会隐藏屏幕阅读器的所有内容，因此您不需要在那里使用 WAI-ARIA！

我正在使用动画/过渡，因此不能隐藏所有内容。

如果您使用动画、不透明度更改等，这会阻止您简单地隐藏整个内容，那么您可以做的就是隐藏内容中的可聚焦内容<div>。

我们可以在应用时使用 CSS 来执行此操作aria-hidden="true"，然后在更改或删除时取消隐藏可聚焦元素aria-hidden="true"。

另外，为了避免当我们再次取消隐藏元素时出现“布局卡顿”，我建议使用visibility: hidden而不是display: none保留为隐藏项目分配的空间，并且仍然对屏幕阅读器等隐藏它们。

#content[aria-hidden=true] a[href],
#content[aria-hidden=true] area[href], 
#content[aria-hidden=true] input:not([disabled]), 
#content[aria-hidden=true] select:not([disabled]), 
#content[aria-hidden=true] textarea:not([disabled]), 
#content[aria-hidden=true] button:not([disabled]), 
#content[aria-hidden=true] [tabindex]:not([disabled]), 
#content[aria-hidden=true] [contenteditable=true]:not([disabled]){
    visibility: hidden;
}

快速演示

明白我的意思的最简单方法是通过一个快速演示，按下“切换 aria-hidden on”按钮，它将隐藏#content <div>.

var btn = document.querySelector('#toggle-aria');
var contentDiv = document.querySelector('#content');


btn.addEventListener('click', function(){
    var self = this;
    if(contentDiv.getAttribute('aria-hidden') == "false"){
      self.innerHTML = "Toggle aria-hidden off";
      contentDiv.setAttribute('aria-hidden', "true"); 
    }else{
      self.innerHTML = "Toggle aria-hidden on";
      contentDiv.setAttribute('aria-hidden', "false"); 
    }
});

#content{
padding: 20px;
border: 1px solid #333;
}

#content[aria-hidden=true] a[href],
#content[aria-hidden=true] area[href], 
#content[aria-hidden=true] input:not([disabled]), 
#content[aria-hidden=true] select:not([disabled]), 
#content[aria-hidden=true] textarea:not([disabled]), 
#content[aria-hidden=true] button:not([disabled]), 
#content[aria-hidden=true] [tabindex]:not([disabled]), 
#content[aria-hidden=true] [contenteditable=true]:not([disabled]){
    visibility: hidden;
}

<br/><br/><button id="toggle-aria">Toggle aria-hidden on</button>

<p>When aria-hidden is set to true on the below div all focusable elements should disappear.</p>

<hr/>

<div id="content" aria-hidden="false">
    <a href="https://google.com">To Google</a><br/><br/>
    <label>An input
      <input />
    </label><br/><br/>
    <label>A Select 
      <select>
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
      </select>
     </label><br/><br/>
     <label>A textarea
      <textarea></textarea>
    </label><br/><br/>
    <button>A button</button><br/><br/>
    <div tabindex="0">A fake button with tabindex</div><br/><br/>
    <div contenteditable="true">A div that is cotnent editable</div><br/><br/>
    <p>Only the labels and this paragraph should be the only things left showing when you toggle the aria-hidden to true</p>
    
</div>
<br/><br/>
<button>I am a button purely so you can see there is nothing focusable within the #content div if you "Tab"</button>

重要提示：按下“打开手风琴”按钮后，您应该在任何动画等aria-hidden 之前删除。这是因为屏幕阅读器用户随后将尝试Tab（或通过屏幕阅读器快捷方式导航）到内容。如果您删除得aria-hidden="true"太晚，他们可能会跳过所有内容！