Polypane's Outline Tools Make Accessibility Audits Tangible

I’m currently giving my personal website what I call an HD remaster—not a full redesign, just a cleanup. And once again, Polypane has proven itself indispensable for the job. I’ve been using the browser since early 2023, and even now, in August 2024, I’m still uncovering helpful features I hadn’t noticed before.

Polypane is a browser built specifically for web development. Its headline feature is displaying your site across multiple viewports simultaneously, but that only scratches the surface of what it offers.

Polypane browser displaying ryantrimble.com in three different viewport sizes simultaneously

Rather than enumerating every feature—something I’ll leave to Polypane’s creator, Kilian Valkhof—I want to highlight a recent discovery in the sidebar’s Outline tab.

Beyond Surface-Level Outlines

The sidebar contains several tabs with different types of site information. The Meta tab, for instance, shows you how social media previews will render for a blog post.

Preview card displaying how open graph information will display on Mastodon.

The Outline tab, however, is where things get interesting. At first glance, it seems straightforward: Polypane scans the page and gives you outlines for headings, landmarks, links, images, focus order, and the entire page accessibility tree.

Polypane sidebar, outline tab, the view select options display the different views available: Headings, Landmarks, Links, Images, Focus order, and Accessibility Tree

Those views alone can surface obvious structural mistakes. But enabling the Show issues option goes further, flagging problems that aren't immediately apparent.

Polypane sidebar, outline tab, Landsmarks view, the "Show issues" option is enabled. In the outline, red text describes an error: Multiple banner elements at the same level found.

The Landmarks view also includes a Show potentials toggle, which identifies elements that could become landmarks. Both views support an overlay on the page, highlighting exactly where those elements sit in the layout.

Polypane sidebar, Outline tab, Landmark view - the outline displays a red symbol indicating a potential landmark element
Polypane laptop viewport view of ryantrimble.com, the landmark overlay feature is enabled, which outlines landmark elements in blue while also displaying their value

Visualizing Keyboard Navigation

I stumbled on these features while debugging a focus-related bug. Switching to the “Focus order” outline gave me the structural view I expected.

Polypane sidebar, outline tab, Focus order view, displays an outline of the focusable elements on the page

What surprised me was the overlay option specifically for focus order.

Polypane laptop view with focus order overlay enabled, displays guide lines marking the location of each focusable items

This turns the tab order into a literal map on the page. It’s an incredibly effective way to visualize keyboard navigation—and in my case, to track down exactly where the focus sequence was breaking.

These kinds of small but meaningful features seem to be everywhere in Polypane. When I mentioned my discovery to Kilian, his response captured the sentiment well: “Everything’s there when you need it!” After using the browser for over a year, I can confirm that’s true.