WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: when to use modal dialog box

for

Number of posts in this thread: 3 (In chronological order)

From: jeffgutsell
Date: Tue, Jul 16 2024 11:52AM
Subject: when to use modal dialog box
No previous message | Next message →

Hi All,

Last week, my wife was using her iPhone with VoiceOver to make a web
purchase while talking to a salesman. After entering the initial data, the
site sent her a dual verification code and a dialog popped up where she
should enter the code.

The dialog was not modal and she had an awful time finding the data entry
field.

I told the salesman that he should report this to IT as an accessibility
issue and that IT should make the dialog modal.

I have been thinking about this incident and would like to hear whether I
provided the right observation. Perhaps this kind of data entry situation
should not even occur in a dialog.



Jeff Gutsell

From: Birkir R. Gunnarsson
Date: Tue, Jul 16 2024 12:11PM
Subject: Re: when to use modal dialog box
← Previous message | Next message →

Short answer, I don't think it needs to be in a dialog, it should just
refresh the page (or screen if this is a native app) adding a verification
code entry field.
If it is a dialog, at least speaking rom the web perspective, that dialog
I) Should be modal and
II) Should auto focus the input field

It's easy to do with the HTML <dialog element>
<dialog aria-label="verify identity">
<label for="p11">Please enter verification code</label>
<input id="p11" type="number" autofocus>
<button>Verify</button>
</dialog>


On Tue, Jul 16, 2024 at 1:52 PM < = EMAIL ADDRESS REMOVED = > wrote:

> Hi All,
>
> Last week, my wife was using her iPhone with VoiceOver to make a web
> purchase while talking to a salesman. After entering the initial data, the
> site sent her a dual verification code and a dialog popped up where she
> should enter the code.
>
> The dialog was not modal and she had an awful time finding the data entry
> field.
>
> I told the salesman that he should report this to IT as an accessibility
> issue and that IT should make the dialog modal.
>
> I have been thinking about this incident and would like to hear whether I
> provided the right observation. Perhaps this kind of data entry situation
> should not even occur in a dialog.
>
>
>
> Jeff Gutsell
>
> > > > >


--
Work hard. Have fun. Make history.

From: Jon Bodnar
Date: Tue, Jul 16 2024 12:44PM
Subject: Re: when to use modal dialog box
← Previous message | No next message

It sounds like you gave reasonable advice based on what you described. That said, I can think of differing scenarios. For example, the verification code input could simply be the next form field. I’d hope the developers would investigate different design options before making UI changes.

Modal dialogs make sense when


* They contain the most important information users need
* Users must act before continuing (like confirming a purchase)

Your situation seems to fit those criteria.

If you're looking for a more detailed discussion, I’d recommend this post: https://hidde.blog/dialog-modal-popover-differences/

-----

Jonathan Bodnar







From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Date: Tuesday, July 16, 2024 at 1:52 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] when to use modal dialog box
Hi All,

Last week, my wife was using her iPhone with VoiceOver to make a web
purchase while talking to a salesman. After entering the initial data, the
site sent her a dual verification code and a dialog popped up where she
should enter the code.

The dialog was not modal and she had an awful time finding the data entry
field.

I told the salesman that he should report this to IT as an accessibility
issue and that IT should make the dialog modal.

I have been thinking about this incident and would like to hear whether I
provided the right observation. Perhaps this kind of data entry situation
should not even occur in a dialog.



Jeff Gutsell

CAUTION: This email was sent from someone outside of the university. Do not click links or open attachments unless you recognize the sender and know the content is safe.