WCAG guideline: 2.1.1 Keyboard

Question

I have a Q on the wcag point 2.1.1 . In my application, I have a confirmation modal for "delete" action. So user click on "Delete" button and then "Are you sure " modal appears. In this modal, I have 2 buttons "Confirm" & "Cancel". Confirm is on the right, Cancel on the left. Which button should get focus on first?
I think as the guideline talks about meaningful sequences for a user, it should be Delete. Here the user intention is to confirm the action, so DELETE should have focus first.
Want to hear expert opinion. Thanks in advance

Answer 1

The answer is it depends.

Do you want to "fail safe" or go for quickest use.

What I mean by this is do you want to make the action as quick as possible (as you may be deleting hundreds of times) or do you want to minimise mistakes?

If the answer is as quick as possible then you focus "Confirm" first. If the answer is "fail safe" then you should focus "cancel" first.

Now as you didn't show any HTML there are a few things to consider.

First put the options in an <ul> and <li>, this lets screen reader users know how many options there are. This is particularly important if you decide to focus "cancel" first.

If you do focus cancel first then make sure that focus is trapped in the modal correctly as otherwise they may end up outside of the modal without pressing "confirm" or "cancel".

Finally I would offer a third, probably superior alternative.....focus the heading of the modal instead.

You can do this using tabindex="-1" on the modal header. This means you can focus the heading with .focus() in JavaScript but the heading does not get added to the pages focus order (so you can't Tab to the heading).

This is probably the best option as if a screen reader user lands directly on a button in a modal they still have to use shortcuts to navigate around the modal for the other information within it (assuming it isn't immediately obvious).

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>