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

Question

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

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

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

如果我在 React 中嵌套按钮，则会引发无法将按钮嵌套在另一个按钮中的错误。 Zoom 的等价物是:

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

这是行不通的。您将如何创建这样的界面以使其保持可访问性(且有效)？

Answer 1

前言

不要嵌套交互式元素

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

答案

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

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

A button / interactive element should be no less than 44px by 44px

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

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

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

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

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

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

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

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

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

最后你会看到我添加了一个 <span>与一些 visually hidden text以便屏幕阅读器用户知道选择器按钮打开了视频控件。

该示例保持了逻辑 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>