To make the dialog component really accessible we need to hide the non-dialog content from screen readers when the dialog is open, "hide" means adding aria-hidden attribute and setting it to true. This is more of a hack as still some screen readers will wrongly not ignore non-dialog content when a dialog is open.
This means dialogs can't be contextual meaning the dialog HTML cannot be next to it's trigger (or open) button, instead the dialog(s) needs to be at the end of the <body>.
Example setup when dialog is not open (look at aria-hidden attributes):
<body>
<!-- Non-dialog content -->
<div aria-hidden="false">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<button type="button" class="js-dialog-btn-trigger">Launch dialog</button>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- //Non-dialog content -->
<!-- Dialog(s) -->
<div aria-hidden="true" class="c-dialog js-dialog">
<h1>I'm a dialog heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- //Dialog(s) -->
</body>Example setup when dialog is open (look at aria-hidden attributes):
<body>
<!-- Non-dialog content -->
<div aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<button type="button" class="js-dialog-btn-trigger">Launch dialog</button>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- //Non-dialog content -->
<!-- Dialog(s) -->
<div aria-hidden="false" class="c-dialog js-dialog">
<h1>I'm a dialog heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- //Dialog(s) -->
</body>
To make the dialog component really accessible we need to hide the non-dialog content from screen readers when the dialog is open, "hide" means adding
aria-hiddenattribute and setting it totrue. This is more of a hack as still some screen readers will wrongly not ignore non-dialog content when a dialog is open.This means dialogs can't be contextual meaning the dialog HTML cannot be next to it's trigger (or open) button, instead the dialog(s) needs to be at the end of the
<body>.Example setup when dialog is not open (look at
aria-hiddenattributes):Example setup when dialog is open (look at
aria-hiddenattributes):