WCAG 指南：2.1.1 键盘

如何解决WCAG 指南：2.1.1 键盘

我在 wcag 点 2.1.1 上有一个 Q。 在我的应用程序中，我有一个用于“删除”操作的确认模式。 所以用户点击“删除”按钮，然后“你确定吗”模式出现。 在此模式中，我有 2 个按钮“确认”和“取消”。确认在右边，取消在左边。 应该首先关注哪个按钮？
我认为当指南谈到对用户有意义的序列时，它应该是删除。这里用户的意图是确认动作，所以 DELETE 应该先有焦点。
想听听专家意见。 提前致谢

解决方法

答案视情况而定。

您想要“故障安全”还是快速使用。

我的意思是，您希望尽可能快地执行操作（因为您可能会删除数百次）还是希望尽量减少错误？

如果答案尽可能快，那么您首先关注“确认”。如果答案是“故障安全”，那么您应该先关注“取消”。

现在由于您没有显示任何 HTML，因此需要考虑一些事项。

首先将选项放在 <ul> 和 <li> 中，这样可以让屏幕阅读器用户知道有多少选项。如果您决定首先关注“取消”，这一点尤其重要。

如果您先取消焦点，请确保焦点正确地被困在模态中，否则它们可能会在不按“确认”或“取消”的情况下结束在模态之外。

最后，我会提供第三种，可能是更好的选择.....而是专注于模态的标题。

您可以在模态标题上使用 tabindex="-1" 执行此操作。这意味着您可以在 JavaScript 中使用 .focus() 聚焦标题，但标题不会添加到页面聚焦顺序中（因此您不能 Tab 到标题）。

这可能是最好的选择，就好像屏幕阅读器用户直接落在模式中的按钮上一样，他们仍然必须使用快捷方式在模式中导航以获取其中的其他信息（假设它不是很明显）。

var deleteBtn = document.querySelector('.openDialog');

deleteBtn.addEventListener('click',function(){
    var dialog = document.querySelector('dialog');
    dialog.toggleAttribute('open');
    var dialogHeading = dialog.querySelector('h2');
    dialogHeading.focus();
});

ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
}
li{
    display: inline-block;
}

<button class="openDialog" aria-haspopup="dialog">Delete</button>

<dialog>
   <h2 tabindex="-1">Are you sure you want to delete this item?</h2>
   <p>This action cannot be undone</p>
   <ul>
       <li><button>Yes Delete (Confirm)</button></li>
       <li><button>Do not delete (Cancel)</button></li>
   </ul>
</dialog>