WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Pop-up question

for

From: Mark Magennis
Date: May 16, 2022 2:19AM

Placing focus on the Close button at the bottom of the dialog is a bit of a throwback to the days when modal dialogs generally contained a short text statement, e.g. a warning or a question, one or more form fields for making choices, and one or more action buttons, typically, OK, Cancel, or Continue. It made sense to read the title and the text and place focus on the first form field or action button. The user will have ben given all of the information above the focus point and would not need to backtrack.

A modal like you describe is different. Because there is a lot of content that the user will need to read and/or interact with before the Close button, I think your intuition is correct that it doesn't make sense to put focus on the Close button as that would require backtracking. I would recommend putting focus on the dialog's container (the <div role="dialog">).

An alternative, if your dialog has an x-icon Close button in the top right corner which is increasingly common these days, is to have that first in the reading order (and therefore Tab order) and place focus on that.

Mark