rel external for accessible image modals
This commit is contained in:
@ -1430,9 +1430,9 @@ export { HeadingAnchors }</script>
|
||||
<p>Fair warning: This solution is likely imperfect.</p>
|
||||
</blockquote>
|
||||
<h2 id="the-dialog-element">the <code>dialog</code> element</h2>
|
||||
<p>do you know how many tutorials want you to roll your own modals? It's a not-insignificant amount. W3Schools, top of the search results in many cases, recommends it in two places - <a href="https://www.w3schools.com/howto/howto_css_modal_images.asp" target="_blank">image modals</a> and <a href="https://www.w3schools.com/css/css3_images_modal.asp" target="_blank">responsive image modals</a>. Several search results for "image modal" pop up div solutions - <a href="https://stackoverflow.com/questions/75598914/how-to-display-an-image-clicking-on-it-using-modal-window-on-html-css-and-js" target="_blank">div modal 1</a>, <a href="https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3" target="_blank">div modal 2</a>, <a href="https://www.youtube.com/watch?v=Y9TNHynFjaQ" target="_blank">div modal 3</a>.</p>
|
||||
<p>do you know how many tutorials want you to roll your own modals? It's a not-insignificant amount. W3Schools, top of the search results in many cases, recommends it in two places - <a href="https://www.w3schools.com/howto/howto_css_modal_images.asp" target="_blank" rel="external">image modals</a> and <a href="https://www.w3schools.com/css/css3_images_modal.asp" target="_blank" rel="external">responsive image modals</a>. Several search results for "image modal" pop up div solutions - <a href="https://stackoverflow.com/questions/75598914/how-to-display-an-image-clicking-on-it-using-modal-window-on-html-css-and-js" target="_blank" rel="external">div modal 1</a>, <a href="https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3" target="_blank" rel="external">div modal 2</a>, <a href="https://www.youtube.com/watch?v=Y9TNHynFjaQ" target="_blank" rel="external">div modal 3</a>.</p>
|
||||
<p>If you don't know of the existence of <code><dialog></code>, a search for image modals will not get you there quickly.</p>
|
||||
<p>If you search for <em>accessible</em> image modals, you'll still hear about <code><div></code>s. Hell, <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/" target="_blank">W3C's ARIA Authoring Practices Guide uses a <code><div></code></a>. You kinda have to go digging to read about the <a href="https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html" target="_blank">dialog element from Scott O'Hara</a> or find <a href="https://accessibleweb.dev/modals" target="_blank">AccessibleWeb.dev's piece on modals</a>. Or you can go <a href="https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html" target="_blank">straight for Adrian Roselli</a> and find examples that use the native <code><dialog></code> element. Thanks Adrian!</p>
|
||||
<p>If you search for <em>accessible</em> image modals, you'll still hear about <code><div></code>s. Hell, <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/" target="_blank" rel="external">W3C's ARIA Authoring Practices Guide uses a <code><div></code></a>. You kinda have to go digging to read about the <a href="https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html" target="_blank" rel="external">dialog element from Scott O'Hara</a> or find <a href="https://accessibleweb.dev/modals" target="_blank" rel="external">AccessibleWeb.dev's piece on modals</a>. Or you can go <a href="https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html" target="_blank" rel="external">straight for Adrian Roselli</a> and find examples that use the native <code><dialog></code> element. Thanks Adrian!</p>
|
||||
<p>Did I roll my own modal at first? Regretfully, yes. I'd used the <code><dialog></code> element before... several years ago... in a project I don't have access to anymore... Needless to say, I had forgotten about its existence.</p>
|
||||
<p>Anyway, I got there. Eventually. So let's talk about modals and <code><dialog></code>.</p>
|
||||
<h3 id="what-does-dialog-give-us">what does <code><dialog></code> give us?</h3>
|
||||
@ -1448,7 +1448,7 @@ export { HeadingAnchors }</script>
|
||||
<li>the <code>autofocus</code> attribute for in-modal elements to set which element should receive focus on opening the modal</li>
|
||||
<li>the <code>open</code> attribute which is set on the <code><dialog></code> when open and removed when closed (when you use the functions mentioned previously)</li>
|
||||
</ol>
|
||||
<p>and more. This is just the pieces in use for me. There's also things like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank">setting forms so that submission closes the dialog</a> (point 1 in that list).</p>
|
||||
<p>and more. This is just the pieces in use for me. There's also things like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank" rel="external">setting forms so that submission closes the dialog</a> (point 1 in that list).</p>
|
||||
<h3 id="what-doesnt-it-give-us">what doesn't it give us?</h3>
|
||||
<ol>
|
||||
<li>a close button - gotta roll your own and attach the requisite <code>.close()</code> call (or rely on users hitting escape or clicking the backdrop)</li>
|
||||
@ -1459,7 +1459,7 @@ export { HeadingAnchors }</script>
|
||||
<blockquote>
|
||||
<p>Do not add the <code>tabindex</code> property to the <code><dialog></code> element as it is not interactive and does not receive focus.</p>
|
||||
</blockquote>
|
||||
<p>— <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank"><code><dialog></code>: additional notes</a> (point 3 in that list).</p>
|
||||
<p>— <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank" rel="external"><code><dialog></code>: additional notes</a> (point 3 in that list).</p>
|
||||
<p>despite this, I found that in Firefox (but not Edge), the <em><code><dialog></code> itself was focusable</em>. I have no idea why, but I tested this on a totally unstyled and unmodified page and still found it to be true. As a focusable element, it made no sense. It had no interactivity and could not be activated.</p>
|
||||
<p>I'm still torn: do I add <code>tabindex="-1"</code>? MDN specifically says not to, but I'm pretty sure they're warning against making it <em>focusable</em>. Why warn against making it nonfocusable when <em>it's not supposed to be focusable in the first place</em>, after all?</p>
|
||||
<p>At current, I'm ambivalent, but I've added <code>tabindex="-1"</code> to handle Firefox's poor behavior. Making the dialog focusable is unhelpful and confusing.</p>
|
||||
@ -1479,7 +1479,7 @@ export { HeadingAnchors }</script>
|
||||
<h3 id="css">css</h3>
|
||||
<p>here's the most relevant parts of the CSS:</p>
|
||||
<ul>
|
||||
<li><code>dialog::backdrop</code> was given a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors" target="_blank">relatively calculated</a> color - <code>rgba(from var(--color-bg) r g b / .8)</code> - as well as a blur</li>
|
||||
<li><code>dialog::backdrop</code> was given a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors" target="_blank" rel="external">relatively calculated</a> color - <code>rgba(from var(--color-bg) r g b / .8)</code> - as well as a blur</li>
|
||||
<li><code>body:has(dialog[open])</code> has <code>overflow: hidden</code> set</li>
|
||||
<li><code>dialog img</code> uses a <code>max-height</code> as well as <code>object-fit: contain</code></li>
|
||||
</ul>
|
||||
@ -1521,42 +1521,14 @@ export { HeadingAnchors }</script>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/backend-accessibility/">
|
||||
<a class="postlink" href="/gender-in-data-models/">
|
||||
|
||||
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/peony.jpg" alt="Image unrelated to post. A light pink peony in full bloom, close up." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility</h2>
|
||||
<h2 data-ha-exclude="" id="gender-in-data-models">gender in data models</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/azure-locations-and-file-crawling/">
|
||||
|
||||
<img src="/img/azure-locations.jpg" alt="A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of locations applicable to a specific resource type. The output is lengthy." loading="lazy" decoding="async" width="1000" height="827">
|
||||
|
||||
<h2 data-ha-exclude="" id="azure-locations-and-file-crawling">azure locations and file crawling</h2>
|
||||
<ul class="postlist-tags">
|
||||
<li>gender</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
@ -1566,6 +1538,34 @@ export { HeadingAnchors }</script>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/domain-and-site-setup/">
|
||||
|
||||
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 data-ha-exclude="" id="domain-and-site-setup">domain and site setup</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/my-favorite-git-flag/">
|
||||
|
||||
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
@ -1597,6 +1597,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/accessible-image-modals/` was built on 2026-03-25T20:00:18.519Z -->
|
||||
<!-- This page `/accessible-image-modals/` was built on 2026-03-25T20:02:54.078Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
