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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Laura Roberts
Sent: 16 May 2022 02:21
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] [WebAIM] Pop-up question

I'm testing a webpage with JAWS that has a pop-up window.

The pop-up window has two tabs at the top, text in the body, and one button at the bottom: "close".

The focus is on the "close" button and I have to hit CTRL+Home to make JAWS read from the top of the pop-up window, or Shift+Tab (but a blind user wouldn't know the tab buttons exist) or hit the up arrow a bunch of times.

This doesn't seem accessible to me, but maybe there's a good reason to have focus on "close". I mainly work on PDF remediation so I don't know WCAG inside and out.

I hope I explained that ok! I'm under an NDA so I'd have to redact stuff on a screenshot.

Thanks,
Laura