3 ms·
> Modal windows are hard to get right. The "final boss of accessibility" Lmao, I was making this point at work yesterday. It's really difficult to justify usin
by kypro 3y ago
> Modal windows are hard to get right. The "final boss of accessibility"
Lmao, I was making this point at work yesterday. It's really difficult to justify using a modal if you care about accessibility. It's not that it's impossible to do correctly, but even when it's done "correctly" it can still be confusing for users navigating with keyboards / screen readers. So modals are almost always either too much effort to do right, or just not the best approach.
Another thing I'd add to this list is that there are some people who browse without JS enabled. I know it's unpopular to care about those folks these days, but it is another reason to avoid modals where possible.
- lelandfe 3y agoI would like to care about JS-disablers, but it is a disproportionally large amount of work for something a few people are choosing to do. I try to give it a best effort, but won’t e.g. rebuild a menu as an HTML checkbox just because some folks are hardliners about running Javascript.
- pavlov 3y agoModals and accessibility was a completely solved problem in 1990s desktop UIs. If anything modals were considered the “easy mode” of UI design. (You can see this in applications like Photoshop that retain some of the original early ‘90s modal-centric design.) It’s crazy how much the web platform’s lack of UI expressivity has set us back. Everything is constantly getting desperately reinvented out of a handful of text markup tags cobbled together by scripts, but it doesn’t solve any of the underlying issues.
- paulryanrogers 3y agoAre you thinking of SDI?
- lcnPylGDnU4H9OF 3y agoThe dialog HTML element[0] obviates the JS point but I don’t think it’s available in all browsers. I think there are still many considerations with this approach but many things also work out of the box. [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
- lelandfe 3y agoIt's been widely available since 2022, when Firefox and Safari landed support https://caniuse.com/dialog https://caniuse.com/dialog
- waboremo 3y agoThey really aren't too much effort to get right, not anymore. Dialog element exists and by default handles most considerations when it comes to accessibility. Also, you're going to have to create modals eventually, alerts are needed in most applications so you might as well create a thorough component. Avoiding modals because of those who browse with JS disabled doesn't make much sense. Especially when they can temporarily enable on your site, as disabling JS for security reasons would mean they trust your site if they're still using it enough to reach a modal. You can still create fallbacks, but they'll be ugly considering most modals are for nested form changes or alerts.