WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML Dialog and name

for

From: Birkir R. Gunnarsson
Date: Dec 22, 2023 6:01AM

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.