WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML Dialog and name

for

From: Birkir R. Gunnarsson
Date: Dec 21, 2023 3:44PM

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
>
>
> > > > >


--
Work hard. Have fun. Make history.