WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML Dialog and name

for

From: Steve Green
Date: Dec 22, 2023 5:54AM

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.