Native Dialog
Demo
Activate one of the buttons labeled "Confirm choice" or "Confirm a different choice" below to open the demo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eius quos provident pariatur incidunt, odio tenetur. Nam amet minus, ullam accusamus libero error ducimus sint pariatur delectus ut eligendi sapiente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eius quos provident pariatur incidunt, odio tenetur. Nam amet minus, ullam accusamus libero error ducimus sint pariatur delectus ut eligendi sapiente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eius quos provident pariatur incidunt, odio tenetur. Nam amet minus, ullam accusamus libero error ducimus sint pariatur delectus ut eligendi sapiente.
<!-- the native <dialog> element -->
<dialog id="example" aria-labelledby="dialog-heading">
<!--
setting the method to "dialog" will cause the <dialog> element to close
when the form is submitted, save the form values, and set the <dialog>
element's returnValue property to the value of the element that submitted
the form.
-->
<form action="" method="dialog">
<div class="header">
<h1 id="dialog-heading">Confirm Your Choice</h1>
<!--
An element with the autofocus will be focused when the
dialog is opened. There should only be one element with
the autofocus attribute.
-->
<button type="submit" class="close" data-value="cancel" autofocus>
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="content">
<p>
Are you sure you want to do that?
</p>
</div>
<div class="choices">
<button type="submit" data-value="yes">Yes</button>
<button type="submit" data-value="no">No</button>
<button type="submit" data-value="cancel">Cancel</button>
</div>
</form>
</dialog>
<main>
<h1>Native Dialog Demo</h1>
<p>Activate one of the buttons labeled "Confirm choice" or "Confirm a different choice" below to open the demo.</p>
<button data-dialog-opener>Confirm choice</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eius quos provident pariatur incidunt, odio tenetur. Nam amet minus, ullam accusamus libero error ducimus sint pariatur delectus ut eligendi sapiente.</p>
<button>This does nothing</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eius quos provident pariatur incidunt, odio tenetur. Nam amet minus, ullam accusamus libero error ducimus sint pariatur delectus ut eligendi sapiente.</p>
<button data-dialog-opener>Confirm a different choice</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio eius quos provident pariatur incidunt, odio tenetur. Nam amet minus, ullam accusamus libero error ducimus sint pariatur delectus ut eligendi sapiente.</p>
<button>This does nothing</button>
</main>
/* custom styling for this native <dialog> component */
dialog {
border-radius: 0.35rem;
border: none;
box-shadow: 0px 3px 5px -3px black;
padding: 0;
}
/**
* the ::backdrop pseudo-element will be visible when a native <dialog>
* element is open.
*/
::backdrop {
background-color: black;
opacity: 0.6;
}
/* ------------------------------------------------------------------------- */
/* Visual Stylings */
/* The CSS below is not particularly imporant. */
dialog > form > * {
padding: 0 1rem;
}
dialog > form > *:last-child {
padding-bottom: 1rem;
}
.header {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem;
border-bottom: 1px solid #777;
}
.header > h1 {
padding: 0.25rem 1rem;
}
.header > button {
font-size: 1.2rem;
}
.content {
text-align: center;
}
.choices {
display: flex;
justify-content: space-evenly;
}
dialog h1 {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}
/* visually hides content */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
let exampleDialog = document.getElementById('example');
let openers = document.querySelectorAll('[data-dialog-opener]');
openers.forEach(opener => {
opener.addEventListener('click', (e) => {
// show modal ensures that the dialog is opened with an
// implicit aria-modal="true" value.
exampleDialog.showModal();
});
});
let dialogBtns = exampleDialog.querySelectorAll('button');
/**
* For each button in the <dialog> and then
* close the dialog when clicked. The value
* given to the close() method sets the <dialog>'s
* returnValue property
* In addition, the close() method will return focus
* to the element that opened the dialog.
*/
dialogBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
exampleDialog.close(btn.dataset.value);
});
});
Why use a dialog?
Dialog components in web development enhance the user experience by providing a focused and interactive space for specific interactions. Dialogs serve as modal overlays, allowing the isolation of tasks such as user authentication, form submissions, or content previews without disrupting the overall user flow. They are particularly valuable for displaying alerts, notifications, and confirmation prompts, guiding users through decision points with clarity. Dialogs also facilitate the presentation of media content, interactive widgets, and help information, contributing to a consistent and user-friendly interface. Moreover, their responsive design capabilities ensure adaptability across various devices. With accessibility features, dialog components cater to a diverse user base, ensuring an inclusive and efficient interaction model in web applications and sites.
What are some accessibility concerns?
Keyboard Focus and Navigation:
Concern: Ensure that keyboard focus is managed appropriately when a dialog opens. Users should be able to navigate through the interactive elements within the dialog using the keyboard.
- Mitigation: Set focus to the first focusable element within the dialog when it opens. Implement keyboard navigation and ensure that users can easily navigate within and close the dialog using keyboard inputs.
Screen Reader Compatibility:
- Concern: Screen reader users may not be notified when a dialog opens or may have difficulty understanding the content within the dialog.
- Mitigation: Use ARIA (Accessible Rich Internet Applications) roles and attributes to announce the dialog’s presence and purpose to screen readers. Ensure that relevant information within the dialog is properly labeled and conveyed.
Focus Trapping:
- Concern: Users may unintentionally navigate outside the dialog using keyboard inputs, especially if the background content is still accessible.
- Mitigation: Implement focus trapping to restrict keyboard focus within the dialog when it is open. This prevents users from tabbing out of the dialog and ensures a logical focus order.
Clear and Concise Content:
- Concern: Ensure that the content within the dialog is clear, concise, and easily understandable for users with various disabilities.
- Mitigation: Provide descriptive and well-structured content within the dialog. Use plain language, and consider the needs of users with cognitive disabilities when presenting information.
Close Button Accessibility:
- Concern: Users need a clear and accessible way to close the dialog.
- Mitigation: Include a visible and accessible close button within the dialog. Ensure that users can close the dialog using keyboard controls, typically the Escape key.
- Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
- In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.