E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Laurence Lewis
Date: Thu, Dec 21 2023 12:02PM
Subject: HTML Dialog and name
No previous message | Next message →

Hi,


In my workplace we are looking at using the HTML <dialog> in place of the
ARIA role dialog and all its attributes.


I have one broad based question and one targeted.


1. Are there any accessibility concerns for using <dialog> anyone has come
across or is aware of?


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


If it is best practice to name the <dialog> element should this be proposed
as a change in the standard?


Thanks


Laurence Lewis

Accessibility Senior Specialist - Telstra, Brisbane Australia

From: Peter Weil
Date: Thu, Dec 21 2023 12:23PM
Subject: Re: HTML Dialog and name
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Thu, Dec 21 2023 3:44PM
Subject: Re: HTML Dialog and name
← Previous message | Next message →

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

From: Steve Green
Date: Fri, Dec 22 2023 5:54AM
Subject: Re: HTML Dialog and name
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, December 21, 2023 10:44 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Birkir R. Gunnarsson
Date: Fri, Dec 22 2023 6:01AM
Subject: Re: HTML Dialog and name
← Previous message | Next message →

Goodness me, I forgot to mention that! Thanks, Steve!

On 12/22/23, Steve Green < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Thursday, December 21, 2023 10:44 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Peter Weil
Date: Fri, Dec 22 2023 8:31AM
Subject: Re: HTML Dialog and name
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:
>
> Goodness me, I forgot to mention that! Thanks, Steve!
>
> On 12/22/23, Steve Green < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Thursday, December 21, 2023 10:44 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.
> > > >

From: Laurence Lewis
Date: Fri, Dec 22 2023 12:17PM
Subject: Re: HTML Dialog and name
← Previous message | Next message →

I appreciate the tips for coding. I was interested in the fact that there
was no name requirement explicitly called out for <dialog> and none of the
examples I have come across in the Living Standard or MDN for that matter
name the <dialog>.

I support the addition of an HTML method to name the dialog for parity with
ARIA Role Dialog so there is no requirement for ARIA. The rest of the code
is pretty straightforward.

I will recommend using aria-labelledby to name the dialog.

All the best
Laurence Lewis
Accessibility Senior Specialist - Telstra



On Sat, 23 Dec 2023 at 5:00 am, < = EMAIL ADDRESS REMOVED = >
wrote:

> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS REMOVED =
>
> To subscribe or unsubscribe via the World Wide Web, visit
> https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> = EMAIL ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS REMOVED =
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. HTML Dialog and name (Laurence Lewis)
> 2. Re: HTML Dialog and name (Peter Weil)
> 3. Re: HTML Dialog and name (Birkir R. Gunnarsson)
> 4. Re: HTML Dialog and name (Steve Green)
> 5. Re: HTML Dialog and name (Birkir R. Gunnarsson)
> 6. Re: HTML Dialog and name (Peter Weil)
>
>
>
> ---------- Forwarded message ----------
> From: Laurence Lewis < = EMAIL ADDRESS REMOVED = >
> To: = EMAIL ADDRESS REMOVED =
> Cc:
> Bcc:
> Date: Fri, 22 Dec 2023 05:02:17 +1000
> Subject: [WebAIM] HTML Dialog and name
> Hi,
>
>
> In my workplace we are looking at using the HTML <dialog> in place of the
> ARIA role dialog and all its attributes.
>
>
> I have one broad based question and one targeted.
>
>
> 1. Are there any accessibility concerns for using <dialog> anyone has come
> across or is aware of?
>
>
> 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>?
>
>
> If it is best practice to name the <dialog> element should this be proposed
> as a change in the standard?
>
>
> Thanks
>
>
> Laurence Lewis
>
> Accessibility Senior Specialist - Telstra, Brisbane Australia
>
>
>
>
> ---------- Forwarded message ----------
> From: Peter Weil < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Thu, 21 Dec 2023 19:23:32 +0000
> Subject: Re: [WebAIM] HTML Dialog and name
> 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 ADDRESS 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
>
>
>
>
>
> ---------- Forwarded message ----------
> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Thu, 21 Dec 2023 17:44:15 -0500
> 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 ADDRESS 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 ADDRESS 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.
>
>
>
>
> ---------- Forwarded message ----------
> From: Steve Green < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Fri, 22 Dec 2023 12:54:45 +0000
> Subject: Re: [WebAIM] HTML Dialog and name
> 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Thursday, December 21, 2023 10:44 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.
> > > at http://webaim.org/discussion/archives
> >
>
>
> ---------- Forwarded message ----------
> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Fri, 22 Dec 2023 08:01:52 -0500
> Subject: Re: [WebAIM] HTML Dialog and name
> Goodness me, I forgot to mention that! Thanks, Steve!
>
> On 12/22/23, Steve Green < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> > Birkir R. Gunnarsson
> > Sent: Thursday, December 21, 2023 10:44 PM
> > To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > > > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
>
>
>
>
> ---------- Forwarded message ----------
> From: Peter Weil < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Fri, 22 Dec 2023 15:31:22 +0000
> 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 ADDRESS REMOVED = > wrote:
> >
> > Goodness me, I forgot to mention that! Thanks, Steve!
> >
> > On 12/22/23, Steve Green < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> >> Birkir R. Gunnarsson
> >> Sent: Thursday, December 21, 2023 10:44 PM
> >> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> >> > >> > >> > >> > >> > >>
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > > > >
> > > > >

From: jeffgutsell@fuse.net
Date: Sat, Dec 23 2023 11:48AM
Subject: Re: HTML Dialog and name
← Previous message | No next message

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 ADDRESS REMOVED = > On Behalf Of Peter Weil
Sent: Friday, December 22, 2023 10:31 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:
>
> Goodness me, I forgot to mention that! Thanks, Steve!
>
> On 12/22/23, Steve Green < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf
>> Of Birkir R. Gunnarsson
>> Sent: Thursday, December 21, 2023 10:44 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
>