A developer created a dialog to confirm a destructive user action. They did the right thing to hide the dialog from screen readers when it's not open by using aria-hidden. They also correctly used the role="alertdialog"
to grab the attention of screen readers on the dialog when it is activated.
Even though they thought their account actions page is accessible, they made two serious mistakes.
First of all, the focus order of the buttons is wrong. According to the DOM hierarchy, after clicking on the delete account button, the element that gets focused is the reset account button, instead of the reset inside the dialog. This irritates and slows down keyboard users, because it forces them to navigate the whole page before reaching the dialog action buttons.
A second mistake is that for an alert dialog to properly work and for screen readers to announce it, an action must be in focus inside the dialog.
A developer created a dialog to confirm a destructive user action. They did the right thing to hide the dialog from screen readers when it's not open by using aria-hidden. They also correctly used the role="alertdialog"
to grab the attention of screen readers on the dialog when it is activated.
Even though they thought their account actions page is accessible, they made two serious mistakes.
First of all, the focus order of the buttons is wrong. According to the DOM hierarchy, after clicking on the delete account button, the element that gets focused is the reset account button, instead of the reset inside the dialog. This irritates and slows down keyboard users, because it forces them to navigate the whole page before reaching the dialog action buttons.
A second mistake is that for an alert dialog to properly work and for screen readers to announce it, an action must be in focus inside the dialog.