WCAG指南:2.1.1键盘

Question

我对wcag点2.1.1有一个Q。在我的应用程序中，我有一个确认模态"delete"行动。用户点击删除按钮;按钮，然后"你确定吗?"模态出现。在这个模式中，我有两个按钮"确认;,"Cancel"确认在右边，取消在左边。应该首先关注哪个按钮?
我认为对于用户来说有意义的序列应该是Delete。在这里，用户的意图是确认操作，因此DELETE应该首先具有焦点。
想听听专家的意见。提前感谢

Answer 1

答案是视情况而定。

是否要"失败安全"?或者用最快的方法。

我的意思是，你是想尽快采取行动(因为你可能会删除数百次)，还是想尽量减少错误?

如果答案越快越好，那么你就专注于"确认";第一。如果答案是"失败安全";然后你应该集中注意力，取消注意力。第一。

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

首先将选项放在<ul>和<li>中，这让屏幕阅读器用户知道有多少个选项。如果你决定"取消"，这一点尤为重要。第一。

如果你先取消焦点，然后确保焦点被正确地捕获在模态中，否则它们可能会在没有按下"确认"键的情况下在模态之外结束。或"cancel".

最后我将提供第三个，可能是更好的选择.....把焦点放在模态的标题。

你可以使用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>