WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML Dialog and name

for

From: jeffgutsell@fuse.net
Date: Dec 23, 2023 11:48AM

Hi All,
I remember past discussions about old techniques for popup dialogs that emphasized the importance of managing focus when the dialog closes. Is that still a concern?

Jeff Gutsell


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Peter Weil
Sent: Friday, December 22, 2023 10:31 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] HTML Dialog and name

It’s also worth noting that the way focus is handled in the <dialog> element is more…interesting… than you might expect:

https://www.matuzo.at/blog/2023/focus-dialog/

And if you choose to focus on the <dialog> element itself, don’t use tabindex.

> On Dec 22, 2023, at 7:01 AM, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>
> Goodness me, I forgot to mention that! Thanks, Steve!
>
> On 12/22/23, Steve Green < <EMAIL REMOVED> > wrote:
>> It's important to use the JavaScript showModal method to launch the
>> <dialog>, otherwise it's not modal. The vast majority of websites we
>> test get this wrong.
>>
>> Steve Green
>> Managing Director
>> Test Partners Ltd
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf
>> Of Birkir R. Gunnarsson
>> Sent: Thursday, December 21, 2023 10:44 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] HTML Dialog and name
>>
>> I've played with <dialog> quite a bit lately and it's working well
>> for accessibility.
>> Just make sure to set the autofocus attribute on the element you want
>> focused when the dialog is displayed, if that element is not
>> focusable, add tabindex="-1".
>> e.g.
>> <dialog aria-label="timeout warning">
>> <h1 tabindex="-1" autofocus">Warning, your session is about to time
>> out</h1> <button>Extend session</button> <button>Log out</button>
>> </dialog>
>>
>> There is no way to label a <dialog> using native HTML, I guess that's
>> why it's not required in the spec. That should be changed eventually.
>> Maybe a <dialog> can support the <caption> element.
>>
>>
>>
>>
>> On 12/21/23, Peter Weil < <EMAIL REMOVED> > wrote:
>>> I think the answer to this one is “yes”.
>>>
>>> The Dialog element has an implicit role of “dialog”, and as you
>>> note, according to the ARIA 1.2 specs, an accessible name is
>>> required for this role.
>>>
>>> I usually use aria-labelledby and reference the highest-level
>>> heading within the dialog (e.g., h2).
>>>
>>> - Peter
>>>
>>>> On Dec 21, 2023, at 1:02 PM, Laurence Lewis
>>>> < <EMAIL REMOVED> >
>>>> wrote:
>>>>
>>>> 2. There is no mention, that I have found in the HTML Living
>>>> Standard for the Dialog element, that it needs a name. Role dialog
>>>> must have an accessible name according to the ARIA 1.2
>>>> Specification. Should ARIA aria-labelledby or aria-label be used to name <dialog>?
>>>
>>>
>>>
>>> --
>>> Peter Weil
>>> Web Developer
>>> University Marketing Web Services
>>> Office of Strategic Communications
>>> University of Wisconsin–Madison
>>> 608-220-3089
>>>
>>>
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
>