Quick Tip: Dialog Focus The specifications for dialogs and modals recommend placing focus on the first focusable item in the dialog. The vast majority of the time this is a close button. this means that a screen reader us…

Quick Tip: Dialog Focus, by @nattarnoff.bsky.social:

https://tarnoff.info/2026/03/10/quick-tip-dialog-focus/

#accessibility #modals #focus #tipsandtricks

‘Your Frustration Is the Product’ The people making these decisions for these websites are like ocean liner captains who are *trying* to hit icebergs.

I haven't read @gruber.foo in awhile but Google News surfaced this piece, and it's spot on

«𝘌𝘷𝘦𝘯 𝘸𝘦𝘣𝘴𝘪𝘵𝘦𝘴 𝘧𝘳𝘰𝘮 𝘱𝘶𝘣𝘭𝘪𝘴𝘩𝘦𝘳𝘴 𝘸𝘩𝘰 𝘤𝘢𝘳𝘦 𝘢𝘣𝘰𝘶𝘵 𝘲𝘶𝘢𝘭𝘪𝘵𝘺 𝘢𝘳𝘦 𝘥𝘰𝘪𝘯𝘨 𝘵𝘩𝘪𝘯𝘨𝘴 𝘰𝘯 𝘵𝘩𝘦 𝘸𝘦𝘣 𝘵𝘩𝘢𝘵 𝘵𝘩𝘦𝘺 𝘸𝘰𝘶𝘭𝘥 𝘯𝘦𝘷𝘦𝘳 𝘥𝘰 𝘸𝘪𝘵𝘩 𝘵𝘩𝘦𝘪𝘳 𝘱𝘳𝘪𝘯𝘵 𝘦𝘥𝘪𝘵𝘪𝘰𝘯𝘴»

#enshittification
#hostileUX #cpm #ads #modals #autoplay #networkrequests

Popover API or Dialog API: Which to Choose?

Popover API or Dialog API: Which to Choose?, by @zellwk.bsky.social (@csstricks@mastodon.social):

css-tricks.com/popover-api-or-dialog-ap...

#popovers #modals #apis #accessibility #javascript

Mastering Dialog Accessibility - Vispero Dialogs are a fundamental component of modern web interfaces, but ensuring their accessibility requires careful attention to multiple WCAG success criteria. This comprehensive guide will walk you through the essential requirements for validating dialog accessibility under WCAG 2.2, following the …

Mastering Dialog Accessibility, by (not on Mastodon or Bluesky):

vispero.com/resources/mastering-dial...

#accessibility #modals #html #aria

Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands Learn how to use HTML invoker commands to open and close dialogs without writing any JavaScript.

Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands, by @schalkneethling@social.themyceliumnetwork.community:

schalkneethling.com/posts/opening-and-closin...

#modals #html

There is No Need to Trap Focus on a Dialog Element | CSS-Tricks Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal mode).

There Is No Need to Trap Focus on a “dialog” Element, by @zellwk.bsky.social (@csstricks@mastodon.social):

css-tricks.com/there-is-no-need-to-trap...

#modals #focus #accessibility

What is the minimum markup needed to create a modal? - Max Design A practical look at the minimum HTML needed to create a modal dialog, with an optional enhancement based on real user testing.

What Is the Minimum Markup Needed to Create a Modal?, by (not on Mastodon or Bluesky):

www.maxdesign.com.au/articles/minimal-modal.h...

#modals #minimalism #html #css #accessibility

Dialog view transitions · Medienbäcker Thomas Günther Combining view transitions and the dialog element, possible?

Dialog View Transitions, by @medienbaecker@mastodon.social:

medienbaecker.com/articles/dialog-view-tra...

#modals #javascript #viewtransitions

I've been rather busy after Christmas with a gift I received kiki's magic Emporium. It was really fun to build it, my next ones going to be a book nook Wonderland. Did you do any crafts over the Hollidays I would love to see them. #DIY #artproject #crafts #modals #miniaturehouse #miniature

Getting a close button to hang off of a dialog - Darin Senneff Have you ever had to implement a modal dialog with a close button designed to hang off of the corner? While not a huge lift for most developers, there’s a few…

Getting a Close Button to Hang Off of a Dialog, by @darin@mas.to:

www.darins.page/articles/close-button-ha...

#modals #buttons #css #anchorpositioning

Discover Dialog - HTMHell A collection of bad practices in HTML, copied from real websites.

Discover Dialog, by @sarajw@front-end.social (@matuzo@front-end.social):

https://www.htmhell.dev/adventcalendar/2025/9/

#html #modals #javascript #css

Top layer troubles: popover vs. dialog - HTMHell A collection of bad practices in HTML, copied from real websites.

Top Layer Troubles: Popover vs. Dialog, by @5t3ph@front-end.social (@matuzo@front-end.social):

https://www.htmhell.dev/adventcalendar/2025/1/

#css #positioning #popovers #modals

NoLoJS: Reducing the JS Workload with HTML and CSS With web performance, less is typically more: When possible, send less data, make the browser do less. Here are several examples where you can replace common JS patterns with HTML and CSS.

NoLoJS: Reducing the JS Workload With HTML and CSS, by @aarontgrogg@mastodon.social:

calendar.perfplanet.com/2025/nolojs-reducing-js-...

#html #disclosurewidgets #forms #modals #popovers

Controlling dialogs and popovers with the Invoker Commands API - HTMHell A collection of bad practices in HTML, copied from real websites.

Controlling Dialogs and Popovers With the Invoker Commands API, by @starshaped@labyrinth.social (@matuzo@front-end.social):

https://www.htmhell.dev/adventcalendar/2025/7/

#modals #popovers #apis #attributes #html

Using Modal Verbs in English Writing: MUST, SHOULD, MIGHT, COULD… Did you know that modal verbs like MUST, SHOULD, WOULD, MIGHT, and others can change the meaning of your writing significantly? In this class, I show you how modals in English writing signal whether you are stating a fact, making an assertion, or giving an opinion or suggestion, and why using the wrong modal verb […]

Top layer troubles: popover vs. dialog - HTMHell A collection of bad practices in HTML, copied from real websites.

#Development #Pitfalls
Top layer troubles, popover vs. dialog · How to avoid possible conflict points ilo.im/168t8f by Stephanie Eckles

_____
#TopLayer #HtmlDialog #PopoverAPI #Modals #Browser #WebDev #Frontend #HTML #CSS #JavaScript

HTML dialog: Getting accessibility and UX right The HTML dialog element gives us powerful native modal capabilities, but creating dialogs that work well for all users still requires intentional accessibility and UX decisions.

HTML “dialog”: Getting Accessibility and UX Right, by @jaredcunha.bsky.social:

jaredcunha.com/blog/html-dialog-getting...

#html #modals #scrolling #accessibility #ux

When to Use Modal vs Dialog Components Confused about modal vs dialog components? Discover implementation patterns, accessibility guidelines, and best practices for creating user-friendly interfaces.

When to Use Modal vs. Dialog Components, by @a11ycollective@front-end.social:

https://www.a11y-collective.com/blog/modal-vs-dialog/

#modals #html #aria #accessibility

Avoid Adding Modals to Other Modals or Dropdowns I ran into some UI patterns that raised some red flags; one was having a modal/dialog triggered from…some other element that is already “on top” of the current page (e.g., other modals, dropdown menus, flyout panels/drawers). After digging into it a bit more, I figured out why it bothers me. I’ve…

Avoid Adding Modals to Other Modals or Dropdowns, by @a11ymel@front-end.social:

melsumner.github.io/avoid-modals-in-nested-c...

#accessibility #modals #wcag

The Problems With Modals, and How to Solve Them I have been building UIs on the web for 10+ years, and most of the time I've been using a component framework like Vue. There have definitely been some ups and downs in the frontend space, but overall I'm quite happy with the current state of the art (I did start on the jQuery era, after all!). H…

The Problems With Modals, and How to Solve Them, by @noeldemartin@noeldemartin.social:

noeldemartin.com/blog/the-problems-with-m...

#howtos #modals #vuejs #typescript

[Spoiler, Answer]

Ok so if you click anywhere in the purple area, it will invoke a "cancel" action.
Surprised? Most modals behave like that. And I find it a horrible UX in every single case. I'm clumsy. I miss-click very often. I will lose my progress super […]

[Original post on mastodon.world]

We COULD make our classes more resonant with poetry; we CAN bring not just meaning but hope into the classroom with words like this. So why DON’T we?

Bookmarking for the #modals, for anyone else in #Edusky who teaches #English #grammar 🤓📚🚀

Where to Put Focus When Opening a Modal Dialog

Where to Put Focus When Opening a Modal Dialog, by @aardrian@toot.cafe:

adrianroselli.com/2025/06/where-to-put-foc...

#accessibility #modals #forms #focus

Move Modal in on a… “shape()”

Move Modal in on a… “shape()”, by @chriscoyier@front-end.social (@frontendmasters.com):

frontendmasters.com/blog/move-modal-in-on-a-...

#modals #functions #css

Getting Creative With HTML Dialog

Getting Creative With HTML Dialog, by @malarkey@mastodon.social (@csstricks@mastodon.social):

css-tricks.com/getting-creative-with-ht...

#html #modals

Create an HTML Dialog When You Click an Image

Create an HTML Dialog When You Click an Image, by @cassidoo@notacult.social:

https://cassidoo.co/post/html-dialog-on-image-click/

#html #images #modals

That said, I kinda feel like “mustn’t” shouldn’t be a word learnenglishkids.britishcouncil.org/grammar-voca... #Modals

Cool native HTML elements you should already be using · Harrison Broadbent In this article, I show you how to use native HTML to implement features like modals & accordions, image captions, grouped lists and more.

Cool Native HTML Elements You Should Already Be Using, by @hrrsnbbnt.bsky.social:

harrisonbroadbent.com/blog/cool-na...

#html #modals #forms #progressindicators #webdev #web #frontend #Programming

Cool Native HTML Elements You Should Already Be Using

Cool Native HTML Elements You Should Already Be Using, by @hrrsnbbnt.bsky.social:

harrisonbroadbent.com/blog/cool-native-html-el...

#html #modals #forms #progressindicators

@e1himself on /dev - Fixing React Promise Modals — The Nice and The Proper What was wrong with the initial version of @prezly/react-promise-modal and how we've addressed them.

We've just published our @prezly/react-promise-modal library v2.0 🎉

This is the most convenient way of spawing modals in React. Period.

Check the code:
github.com/prezly/react...

Read the cover blog post:
voskoboinyk.com/posts/2024-1...

Cheers! 🖖

#react #modals #prezly #opensource #blog