WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: HTML Dialog and name

for

From: Laurence Lewis
Date: Dec 22, 2023 12:17PM

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 REMOVED> >
wrote:

> Send WebAIM-Forum mailing list submissions to
> <EMAIL 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 REMOVED>
>
> You can reach the person managing the list at
> <EMAIL 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 REMOVED> >
> To: <EMAIL 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 REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 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 REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 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.
>
>
>
>
> ---------- Forwarded message ----------
> From: Steve Green < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 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.
> > > at http://webaim.org/discussion/archives
> >
>
>
> ---------- Forwarded message ----------
> From: "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 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.
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
>
>
>
>
> ---------- Forwarded message ----------
> From: Peter Weil < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 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.
> >> > >> > archives at
> >> http://webaim.org/discussion/archives
> >> > >> > >> > >> > >> > >>
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > > > >
> > > > >