Accessible Pretext

Demos

Small browser demos for the kinds of layout work Pretext unlocks: text height without DOM measurement in the hot path, manual line routing, and width-tight multiline UI.

Accordion

Expand and collapse sections whose text heights are calculated from Pretext.

Bubbles

Tight multiline message bubbles that keep the same line count with less wasted area.

Dynamic Layout

A fixed-height editorial spread with obstacle-aware title routing and continuous flow.

Variable Typographic ASCII

Particle-driven ASCII art comparing proportional measured glyphs against a monospace version.

Editorial Engine

Animated orbs, live text reflow, pull quotes, and multi-column flow with zero DOM measurements.

Rich Text

Rich inline text, code spans, links, and chips laid out together, with pills staying whole while text keeps wrapping naturally.

Masonry

A text-card occlusion demo where height prediction comes from Pretext instead of DOM reads.

Accessibility enhancements

Pretext is a DOM-free text measurement engine. That means the visual layouts in these demos are computed in JavaScript and rendered as positioned elements — which is powerful, but invisible to screen readers by default. Every demo has been enhanced to prove that ambitious visual work and genuine accessibility can coexist.

The core pattern across all demos:

Semantic content first. All meaningful text exists as proper HTML — headings, paragraphs, blockquotes, lists — readable by assistive technologies, find-in-page, browser translation, and reader mode.
Visual stage as enhancement. The positioned layout fragments are marked aria-hidden so screen readers skip the visual layer entirely and read the semantic content instead.
Keyboard equivalence. Interactive demos provide native controls (buttons, sliders, toggles) as alternatives to pointer-only interactions like drag.
Reduced motion. Demos with animation respect prefers-reduced-motion, starting in a stable state with motion paused.
Visible focus. Every interactive element has a clear :focus-visible outline.
Proper contrast. All essential text meets WCAG AA contrast ratios.

Progressive enhancement: works without JavaScript

Pretext is a JavaScript library, so it would be easy to assume these demos are useless without JS. We made sure that's not the case. Every demo follows a progressive enhancement strategy where content is accessible even when JavaScript is unavailable — in text browsers like Lynx, in restrictive corporate environments, in search engine crawlers, and in browser reader modes.

Content-first defaults. Pages default to showing readable content. Visual stages are hidden until JavaScript adds the appropriate view class, not the other way around. Without JS, you get the article — not a blank page.
Pre-populated HTML. Content lives directly in the HTML source rather than being injected by JavaScript. The editorial engine and dynamic layout embed their full articles, the accordion pre-populates all section titles and body text, the bubbles demo includes every chat message, and the rich note embeds its formatted text. Crawlers, reader modes, and text browsers see real content immediately.
Graceful degradation for interactive controls. The accordion defaults to all sections expanded when JS can't run the collapse logic. Sliders and view toggles are inert without JS, but the content they control is already visible.
<noscript> fallbacks. Every demo that depends on JavaScript for rendering includes a <noscript> message explaining what the demo does and, where applicable, linking to original source material.

Why this matters: SEO and discoverability

Without these enhancements, none of the demo content would be indexed by search engines. The original demos render all text via JavaScript into absolutely-positioned fragments — search engine crawlers, AI systems, and social media link previews see empty markup. No headings, no paragraphs, no content. The pages are effectively invisible to the non-JavaScript web.

With pre-populated HTML, all content is immediately available to Google, Bing, DuckDuckGo, AI crawlers (ChatGPT, Perplexity, Claude), RSS readers, browser reader modes, translation services, and social media Open Graph scrapers. Accessibility and SEO are not separate concerns — they are the same principle: content should exist as semantic HTML first, with visual enhancement layered on top.

Each demo page includes a detailed "Accessibility in this demo" section explaining exactly what was done and why. The goal is not just technical compliance — it's demonstrating that the accessible path can be the default, best-supported path for any Pretext-powered layout.