Dialog labels

Silktide checks that dialogs - pop-up windows that appear over the page - declare a name that can be read out by , so people know what has just opened.

A dialog is marked up in by giving an element the role dialog. The role tells assistive technology that a separate window has appeared, but on its own it doesn't say what the window is for.

<!-- Problem: a dialog with no accessible name -->
<div role="dialog">
  <p>Your session is about to expire.</p>
</div>

Why this matters

When a dialog opens, a announces it and moves the visitor's focus inside. If the dialog has a name, the listener hears something like "Session timeout, dialog" and immediately understands the interruption. Without one, they hear only "dialog" - they have been pulled away from what they were doing with no explanation, and have to explore the contents to work out why.

How to fix it

Give every dialog an , using one of:

aria-labelledby pointing at the id of the dialog's visible title - the best option, because sighted visitors see the same name:

<!-- Fixed: the dialog is named by its heading -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Session timeout</h2>
  <p>Your session is about to expire.</p>
</div>

aria-label with the name as text, when the dialog has no visible title:

<div role="dialog" aria-label="Session timeout">
  ...
</div>

How Silktide tests this

Find every element on each page whose role is dialog.
Work out each dialog's accessible name, from attributes such as aria-label and aria-labelledby.
Report each dialog whose accessible name is missing or empty.

Troubleshooting

My dialog only appears after user interaction

Silktide examines each page as it loads. A dialog that is only added to the page later - for example after clicking a button - may not be tested, but it still needs a label for visitors who reach it.

I use the native dialog element

This check examines elements that declare role=\"dialog\" explicitly. A native <dialog> element without that role is not tested, but the guidance still applies: give it an accessible name with aria-labelledby or aria-label.