Skip to main content
Home / Articles /

A More Accessible Portals Demo

Direct Link →

The point of the <portal> element (behind a flag in Chrome Canary) is that you can preload another whole page (like <iframe>), but then have APIs to animate it to the current page. So "Single Page App"-like functionality (SPA), but natively. I think that's pretty cool. I'm a fan of JavaScript frameworks in general, when they are providing value by helping do things that are otherwise difficult, like fancy state management, efficient re-rendering, and component composition. But if the framework is being reached for just for SPA qualities, that's unfortunate. The web platform is at its best when it seems what people are doing are in step with native, standardized solutions.

But it's not the web platform at its best when things are done inaccessibly. Steve Faulkner wrote "Short note on the portal element" where he points out seven issues with the portal element as it exists now. Here's a demo of it with some of those issues addressed. I guess it's somewhat of an implementation issue if a lot can be fixed from the outside, but I imagine much of it cannot (e.g. back button behavior, whether the loaded pages becomes part of the accessibility tree, etc.).

Here's a video of the basic behavior: