rel external for accessible image modals
This commit is contained in:
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
recently I wrote *several* sites using [Eleventy](https://www.11ty.dev/){target="_blank" rel="external"} (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by [heckin.technology](https://heckin.technology/){target="_blank" rel="external"}. See ya, GitHub. Won't miss ya.
|
||||
|
||||
I've compiled some of the things I've learned in a standalone site: [11ty Lessons](https://inherentlee.codeberg.page/lessons/){target="_blank" rel="external"}.
|
||||
Originally, I compiled some of the things I've learned in a standalone site.
|
||||
|
||||
however, since I don't know how much I'll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I'll skip the intro to Markdown content. I'm also going to update them where I've learned more or to better match what's represented on this site.
|
||||
|
||||
|
||||
@ -14,11 +14,11 @@ Recently I've been working on a single-page digital rendition of a zine complete
|
||||
|
||||
## the `dialog` element
|
||||
|
||||
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 - [image modals](https://www.w3schools.com/howto/howto_css_modal_images.asp){target="_blank"} and [responsive image modals](https://www.w3schools.com/css/css3_images_modal.asp){target="_blank"}. Several search results for "image modal" pop up div solutions - [div modal 1](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 2](https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3){target="_blank"}, [div modal 3](https://www.youtube.com/watch?v=Y9TNHynFjaQ){target="_blank"}.
|
||||
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 - [image modals](https://www.w3schools.com/howto/howto_css_modal_images.asp){target="_blank" rel="external"} and [responsive image modals](https://www.w3schools.com/css/css3_images_modal.asp){target="_blank" rel="external"}. Several search results for "image modal" pop up div solutions - [div modal 1](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 2](https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3){target="_blank" rel="external"}, [div modal 3](https://www.youtube.com/watch?v=Y9TNHynFjaQ){target="_blank" rel="external"}.
|
||||
|
||||
If you don't know of the existence of `<dialog>`, a search for image modals will not get you there quickly.
|
||||
|
||||
If you search for *accessible* image modals, you'll still hear about `<div>`s. Hell, [W3C's ARIA Authoring Practices Guide uses a `<div>`](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/){target="_blank"}. You kinda have to go digging to read about the [dialog element from Scott O'Hara](https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html){target="_blank"} or find [AccessibleWeb.dev's piece on modals](https://accessibleweb.dev/modals){target="_blank"}. Or you can go [straight for Adrian Roselli](https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html){target="_blank"} and find examples that use the native `<dialog>` element. Thanks Adrian!
|
||||
If you search for *accessible* image modals, you'll still hear about `<div>`s. Hell, [W3C's ARIA Authoring Practices Guide uses a `<div>`](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/){target="_blank" rel="external"}. You kinda have to go digging to read about the [dialog element from Scott O'Hara](https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html){target="_blank" rel="external"} or find [AccessibleWeb.dev's piece on modals](https://accessibleweb.dev/modals){target="_blank" rel="external"}. Or you can go [straight for Adrian Roselli](https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html){target="_blank" rel="external"} and find examples that use the native `<dialog>` element. Thanks Adrian!
|
||||
|
||||
Did I roll my own modal at first? Regretfully, yes. I'd used the `<dialog>` element before... several years ago... in a project I don't have access to anymore... Needless to say, I had forgotten about its existence.
|
||||
|
||||
@ -38,7 +38,7 @@ so, what do we get from the `<dialog>` element that we don't get from a `<div>`
|
||||
1. the `autofocus` attribute for in-modal elements to set which element should receive focus on opening the modal
|
||||
1. the `open` attribute which is set on the `<dialog>` when open and removed when closed (when you use the functions mentioned previously)
|
||||
|
||||
and more. This is just the pieces in use for me. There's also things like [setting forms so that submission closes the dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes){target="_blank"} (point 1 in that list).
|
||||
and more. This is just the pieces in use for me. There's also things like [setting forms so that submission closes the dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes){target="_blank" rel="external"} (point 1 in that list).
|
||||
|
||||
### what doesn't it give us?
|
||||
|
||||
@ -51,7 +51,7 @@ MDN warns:
|
||||
|
||||
> Do not add the `tabindex` property to the `<dialog>` element as it is not interactive and does not receive focus.
|
||||
|
||||
— [`<dialog>`: additional notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes){target="_blank"} (point 3 in that list).
|
||||
— [`<dialog>`: additional notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes){target="_blank" rel="external"} (point 3 in that list).
|
||||
|
||||
despite this, I found that in Firefox (but not Edge), the *`<dialog>` itself was focusable*. 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.
|
||||
|
||||
@ -83,7 +83,7 @@ I also looped through all images and attached my `openDialog()` function to any
|
||||
|
||||
here's the most relevant parts of the CSS:
|
||||
|
||||
- `dialog::backdrop` was given a [relatively calculated](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors){target="_blank"} color - `rgba(from var(--color-bg) r g b / .8)` - as well as a blur
|
||||
- `dialog::backdrop` was given a [relatively calculated](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors){target="_blank" rel="external"} color - `rgba(from var(--color-bg) r g b / .8)` - as well as a blur
|
||||
- `body:has(dialog[open])` has `overflow: hidden` set
|
||||
- `dialog img` uses a `max-height` as well as `object-fit: contain`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user
