按钮内的可访问嵌套按钮？

Question

我正在尝试构建一个看起来像 Zoom 按钮的按钮。

这里有一个按钮可以在相机按钮内选择一个设备。我想创建类似的东西，你有一个按钮和另一个按钮，在里面展开一个选择器。

您如何以易于访问的方式创建它？

如果我在 React 中嵌套按钮，它会抛出错误，你不能在另一个按钮中嵌套一个按钮。Zoom 的等效项是：

<button>
  Stop Video
  <button>Pick Device</button>
</button>

这不起作用。您将如何创建这样的界面以使其保持可访问（和有效）？

Answer 1

序言

不要嵌套交互元素

嵌套按钮或超链接不是有效的 HTML 是有原因的，它会导致噩梦，因为它知道应该在单击时执行哪个操作（开始时），而对于辅助技术，这会使事情变得更糟，因为它会混淆可访问性树关于它应该呈现给屏幕阅读器的内容。

答案

如果仔细观察，您会发现它们实际上并未嵌套，“选择器”按钮位于另一个按钮的顶部。

现在这里在可访问性方面存在问题，单击/点击目标大小。

按钮/交互元素不应小于 44px x 44px

因此，您提供的 Zoom 示例不符合此标准。此外，如果您选择了选择器，那么显示“停止视频”的工具提示看起来是错误的，因为它应该是当前悬停按钮的工具提示。

那么我们如何才能创建您想要的可访问版本？

我建议在右上角放置一个带有 44 x 44 按钮的大按钮。

这可以通过绝对定位轻松完成。

为了确保在视觉上很明显按钮是相关的，我将第二个按钮插入了 2px。

下面不是一个完整的例子，但我已经给了你一个开始。

我添加aria-expanded到打开子菜单的按钮，当菜单打开时会切换。

我还添加了aria-haspopup属性让用户知道这个按钮打开了一个子菜单。

我还添加aria-controls了让辅助技术知道按钮和它打开的菜单之间的关系。

最后你会看到我添加了一个在里面<span>有一些视觉上隐藏的文本，以便屏幕阅读器用户知道选择器按钮打开了视频控件。

该示例保持了逻辑 Tab 键顺序并且非常易于访问，但是仍然有一些事情，例如能够使用箭头键导航菜单按钮，使用键关闭菜单Esc并将焦点返回到打开菜单的按钮等，您需要这样做自己实施。哦，造型很明显！

var mainButton = document.querySelector('.main-button');
var menuToggle = document.querySelector('.sub-button');
var menu = document.getElementById('controls');

mainButton.addEventListener('click', function(){

  alert("clicked the main button");
});

menuToggle.addEventListener('click', function(){

  if(menu.classList.contains('open')){
       menu.classList.remove('open');
       menuToggle.setAttribute('aria-expanded', false);
   }else{
      menu.classList.add('open');
      menuToggle.setAttribute('aria-expanded', true);
   }
});

.container{
  position: relative;
  width: 144px;
  height: 48px;
}
.main-button{
   width: 144px;
   height: 48px;
   padding-right: 50px;
}
.sub-button{
   position: absolute;
   width: 44px;
   height: 44px;
   top:2px;
   right:2px;
}
.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
#controls{
  display: none;
}
#controls.open{
  display: block;
}

<div class="container">
<button class="main-button">Stop Video</button>
<button class="sub-button" aria-expanded="false" aria-haspopup="true" aria-controls="controls">&#8964; <span class="visually-hidden">Pick Device</span></button>
<ul id="controls"
      role="menu"
      aria-labelledby="sub-button">
      <li><button>Option 1</button></li>
      <li><button>Option 2</button></li>
      </ul>
</div>