WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML Dialog and name

for

From: Peter Weil
Date: Dec 22, 2023 8:31AM

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.
>> >> >> http://webaim.org/discussion/archives
>> >> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >