PROJECTS
Modals
MODALS
View source
files here!
All the files you need for
this tutorial can be found at
https://netm.ag/2LgBaKTcomplete browser support and is subject to change.
But don’t worry, we’ll also be writing fallback code!
HTML <dialog> requires three considerations: the
HTML, the CSS and, finally, the JavaScript. We’ll
start with the HTML.STEP 1: MARK UP THE MODAL IN HTML
Firstly, the semantic <dialog> element is used to mark
up the modal. Typically, modals are semantically
separate from content, so they would normally
appear as a direct child of the <body>.<body>
<main>
<button id=”trigger”>Show modal</button>
</main>
<dialog id=”modal”>CODE ACCESSIBLE MODALS
Daniel Schwarz walks us through the method of developing accessible
modals/dialogs using modern front-end techniques
‘Modals aren’t accessible’ is a claim that I’ve
never really understood because nothing is
accessible until made to be so. Not even colours.
I’ll concede in saying that modals have never really
been accessible right out of the box, however coding
them isn’t as difficult as it’s made out to be. And
now, unfortunately, modals have a bad reputation
because of this ‘modals aren’t accessible’ claim,
when in reality it sits idly between myth and excuse.
Regardless, we now have a semantic HTML
element for modals (<dialog>), a JavaScript A PI
(https://netm.ag/2OrAQee) to make them functional
and even a CSS pseudo-element (::backdrop) that we
can style.
Let’s take a look at the implementation as we
create an accessible multi-link menu modal.
Warning: this technique is experimental, lacksABOUT THE AUTHOR
DANIEL
SCHWARZ
w: https://uxtricks.design
t: @mrdanielschwarz
job: Creator of UX Tricks
areas of expertise:
Product design, UX and
design tools