inherentlee/leecat.art-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Sun Sep 20 15:08:31 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-20 22:08:31 +00:00
parent 1d51eaebec
commit 207d8c1cd5
731 changed files with 8308 additions and 5281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
accessible-image-modals/index.html
+149 -27
View File
@@ -40,7 +40,80 @@
<style>.post-metadata {
<style>#toc {
float: right;
margin: 1rem 0 1.5rem 1.5rem;
width: min(calc(100% - 1.5rem), 23rem);
/* 23rem is the width of the words 'table of contents' in my header font */
/* yes, it's a bit hacky */
}
@media (max-width: 850px) {
#toc {
float: unset;
margin-top: 2rem;
margin-left: .5rem;
width: calc(100% - .5rem);
}
}
#toc details {
border: thick solid var(--color-pink);
border-radius: 1rem;
margin-top: 1rem;
}
#toc summary {
position: relative;
top: -1.5rem;
left: -.75rem;
width: fit-content;
background: var(--color-bg);
border-radius: .5rem;
}
#toc summary:focus-visible {
outline: .15rem solid var(--color-teal);
}
#toc summary::marker {
font-size: 2.35rem;
}
#toc h2 {
margin-top: 0;
display: inline;
line-height: normal;
}
#toc nav {
position: relative;
top: -1.25rem;
}
#toc li {
margin-block: .45rem 0;
}
@media (max-width: 650px) {
#toc nav > ol {
margin-left: .5rem;
}
}
/* basically we want to style this `ol` as a `ul` */
#toc ol > li {
list-style: disc;
}
#toc ol > li > ol > li {
list-style: circle;
}
#toc ol > li > ol > li > ol > li {
list-style: square;
}
.post-metadata {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
color-scheme: light dark;
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
/* if you change the header font, go to post-toc.css and fuck about with the width
of the table of contents */
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
}
/* Base */
* {
box-sizing: border-box;
margin: 0;
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article data-pagefind-body="">
<h1 id="accessible-image-modals">accessible image modals</h1>
<h1>accessible image modals</h1>
<div class="post-metadata">
<p>
@@ -1843,9 +1917,54 @@ switch (currentThemeValue) {
<img class="hero" src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
<p>Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.</p>
<aside id="toc">
<details>
<summary><h2>table of contents</h2></summary>
<nav class="toc">
<ol>
<li><a href="#the-dialog-element">the dialog element</a>
<ol>
<li><a href="#what-does-%3Cdialog%3E-give-us%3F">what does <dialog> give us?</dialog></a>
</li>
<li><a href="#what-doesn't-it-give-us%3F">what doesn't it give us?</a>
</li>
<li><a href="#a-bug">a bug</a>
</li>
</ol>
</li>
<li><a href="#in-addition-to-the-%3Cdialog%3E">in addition to the <dialog></dialog></a>
<ol>
<li><a href="#html">html</a>
</li>
<li><a href="#js">js</a>
</li>
<li><a href="#css">css</a>
</li>
</ol>
</li>
<li><a href="#errors%3F-questions%3F">errors? questions?</a>
</li>
</ol>
</nav>
</details>
</aside>
<p>Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.</p>
<blockquote>
<p>Fair warning: This solution is likely imperfect.</p>
<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" 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 &quot;image modal&quot; 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>
@@ -1853,7 +1972,7 @@ switch (currentThemeValue) {
<p>If you search for <em>accessible</em> image modals, you'll still hear about <code>&lt;div&gt;</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>&lt;div&gt;</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>&lt;dialog&gt;</code> element. Thanks Adrian!</p>
<p>Did I roll my own modal at first? Regretfully, yes. I'd used the <code>&lt;dialog&gt;</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>&lt;dialog&gt;</code>.</p>
<h3 id="what-does-dialog-give-us">what does <code>&lt;dialog&gt;</code> give us?</h3>
<h3 id="what-does-%3Cdialog%3E-give-us%3F">what does <code>&lt;dialog&gt;</code> give us?</h3>
<p>so, what do we get from the <code>&lt;dialog&gt;</code> element that we don't get from a <code>&lt;div&gt;</code> modal?</p>
<ol>
<li>a semantically meaningful element</li>
@@ -1867,7 +1986,7 @@ switch (currentThemeValue) {
<li>the <code>open</code> attribute which is set on the <code>&lt;dialog&gt;</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" 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>
<h3 id="what-doesn't-it-give-us%3F">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>
<li>prevention of scroll on the rest of the page</li>
@@ -1881,7 +2000,7 @@ switch (currentThemeValue) {
<p>despite this, I found that in Firefox (but not Edge), the <em><code>&lt;dialog&gt;</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=&quot;-1&quot;</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=&quot;-1&quot;</code> to handle Firefox's poor behavior. Making the dialog focusable is unhelpful and confusing.</p>
<h2 id="in-addition-to-the-dialog">in addition to the <code>&lt;dialog&gt;</code></h2>
<h2 id="in-addition-to-the-%3Cdialog%3E">in addition to the <code>&lt;dialog&gt;</code></h2>
<p>here's what else I wrote...</p>
<h3 id="html">html</h3>
<p>besides the <code>&lt;dialog&gt;</code>, I gave my <code>&lt;img&gt;</code> elements <code>tabindex=&quot;0&quot;</code> to make them focusable.</p>
@@ -1901,9 +2020,10 @@ switch (currentThemeValue) {
<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>
<h2 id="errors-questions">errors? questions?</h2>
<h2 id="errors%3F-questions%3F">errors? questions?</h2>
<p>reach out!</p>
</article>
@@ -1941,12 +2061,28 @@ switch (currentThemeValue) {
<section class="related-posts">
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/azure-locations-and-file-crawling/">
<h2 data-ha-exclude="">azure locations and file crawling </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</li>
</ul>
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/an-intro-to-git/">
<h2 data-ha-exclude="" id="an-intro-to-git">an intro to git </h2>
<h2 data-ha-exclude="">an intro to git </h2>
<ul class="postlist-tags">
@@ -1960,7 +2096,7 @@ switch (currentThemeValue) {
<li class="post">
<a class="postlink" href="/handedness-toggle/">
<h2 data-ha-exclude="" id="handedness-toggle">handedness toggle </h2>
<h2 data-ha-exclude="">handedness toggle </h2>
<ul class="postlist-tags">
@@ -1972,20 +2108,6 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/framer-accessibility/">
<h2 data-ha-exclude="" id="framer-accessibility">framer accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/framer.png" alt="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features." loading="lazy" decoding="async" width="841" height="532">
</a>
</li>
</ol>
</section>
@@ -2038,6 +2160,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/accessible-image-modals/` was built on 2026-09-20T00:40:39.765Z -->
<!-- This page `/accessible-image-modals/` was built on 2026-09-20T22:08:14.588Z -->
</body>
</html>