Pixefy 1.3.0: Accessibility Checks in Every Pane & a Rebuilt Inspect

See what breaks, for whom, at every width. Pixefy 1.3.0 brings accessibility checks into every pane: each pane is checked at its own width and compared with the others. Contrast is measured where other checkers give up, and you can hear the order a screen reader follows. Inspect is rebuilt around how you read CSS, with grouped properties, Figma-style controls for flex, grid, shadows, transitions and borders, copy and paste between elements, and ⇄ on every value that differs between your panes. Add touch simulation that taps like a phone, sync that keeps up and a long list of fixes, and you have a release big enough for a new number.

What's new in Pixefy

♿ New: Accessibility checks in every pane (Pro)

Responsive bugs and accessibility bugs are often the same bug: a menu that collapses on mobile, cards that reorder at one width, text that fades into a photo only on a phone. The new Accessibility panel (beta) checks every pane at its own width and compares the results, so you see what breaks where. Open it from Accessibility in the toolbar, or press S.

• Every issue, in every pane. Errors, warnings and items to review sit in one list, each with its WCAG criterion, a How to fix link, Show in panes and Copy finding. Chips on a finding show which panes have it; click one to see it in that pane alone.

• Contrast measured where automated checks give up. Standard checkers leave text over see-through layers, gradients, background blur, masks and decorations for you to review by hand. Pixefy measures that text in the pane itself and names what fails, with its ratio. Text that is still fading in is listed apart instead of failing.

• Order that matches the layout. Pixefy flags where the reading order or the tab order contradicts what the layout shows, and structure that some panes are missing, one row per element however many panes show it.

• WCAG 2.2 target size. Touch targets under 24 px without enough room around them are measured in each pane at its own width, right where a phone layout gets cramped. Label in Name problems are listed as warnings.

• Hear the reading order. The Screen reader view plays the page in the order a screen reader follows, grouped by landmark, using the offline voices installed on your computer. Show in panes numbers that order on the page, and orange rows mark where it departs from the layout. Outline lists landmarks, headings, links and form controls, and which panes are missing them.

• Live: what gets announced. Record while you click and type, and Live shows what a screen reader is likely to announce, what changes silently, and what probably isn't announced at all. Each reaction is one card, with the panes it happened in.

• Honest about what it couldn't check. Each check is a snapshot of the whole page. Panes that couldn't be fully read, pages that keep moving and changes made since the check each get a plain note, and Rescan runs a fresh check whenever you want one. When your panes show different pages, each page is checked on its own. For pages that reveal text as you scroll, ⋯ → Scroll through and check scrolls every pane to its end first.

• Likely fine, kept apart. Small order swaps, content shown by another copy, items collapsed into a menu and videos without sound go under Likely fine · not counted, so your totals count what matters.

• Back and forth with Inspect. Inspect this element hands a finding to Inspect. Reopen Accessibility and your last check is there instantly, as long as your panes still show the same pages.

On the Free plan, point at Accessibility or press S for a summary of the page: its issue count by errors, warnings and items to review. Start the 14-day Pro trial to see every issue, the screen reader and live announcements.

🔍 Inspect, rebuilt

The CSS panel now reads the way you think about a layout, and edits the way a design tool does.

• Ten clear groups. Size, Spacing, Font, Background & border, Layout, Position, Effects, Motion, Interaction & scroll, and Other. A dot on a collapsed group means it holds changes.

• Layout that follows the element. Flex and grid rows follow the element's own display, and how it sits in its parent shows under As an item of. Properties Inspect never listed before are there too, such as gap, align-items, align-self, order, grid-area and aspect-ratio.

• Values written as you'd write them. A shorthand is one row (padding 12px 20px) whose arrow opens its single values, and a border is one row too. Equal grid tracks are counted (3 × 316px), each transition gets its own line, Google fonts and image files are links, and oklch(), lab() and color() values get a swatch. A lighter value is inherited: point at it to see where it comes from.

• Contrast right under the color (Pro). The selected text's contrast sits under its color row, ✓ AA or ✗ AA for its size. It is measured the way the Accessibility check measures it, and measured again after you change a color.

• Element, class and state on one row (Pro). Choose between this element and its whole class, and pick the state you edit from a list that counts the changes in each. Hover now runs the page's own hover, so effects driven by script, as on Framer sites, show up too. ⌘Z / Ctrl+Z also takes back what you add, change or remove in the element.style card.

• Smarter tooltips, keyboard tabs. With an element selected, pointing at another shows its selector, size, font, color, named margin and padding and more, with the browser's own defaults in light gray. Inspect's tabs now work from the keyboard.

🎛️ New: Shadow, flex & motion controls (Pro)

Click the caret after display, As an item of, box-shadow, transition or border, and a Figma-style card opens under the row. Every change lands in the row, blue like a typed edit, and ⌘Z takes it back.

• Flex and grid: place items with the 3×3 alignment box, and set direction, gap, wrap and Space between, or a grid's columns.

• Items: make a flex item Hug, Fill or Fixed at the width you set, or span grid columns and rows and place it in a named area.

• Shadows and borders: X, Y, Blur, Spread, color and Inset for each shadow; color, style, sides and width for a border.

• Transitions: duration, easing (custom curves too) and delay, with Preview to play them in the pane.

• Keywords: ↑ and ↓ step through values such as display and position.

📋 New: Copy and paste CSS

Point at a CSS row and click its copy button to copy the property with its value, ready for your code or an AI chat. Hold Shift to add more properties. Then select another element and choose Paste in its element.style card, or press ⌘V / Ctrl+V. One Undo takes the whole paste back. Copying is free; pasting is Pro.

⇄ Every value, in every pane (Pro)

• ⇄ marks what differs. A value that differs between your panes gets ⇄ at the end of its row. Point at it for each pane's value by width, and click it to open that group in Diff.

• Diff, rewritten. Diff uses Inspect's groups and sums up what it found, such as "5 values differ across 3 panes". Neighboring panes that agree share a row and your pane is boxed. Panes where the element is hidden, missing or on another page get a note instead of counting as a change.

🎨 Colors, Assets and the rest of Inspect

• Colors by what they do (Pro). Text, Backgrounds, and Borders & icons, each color with its variable and where it's used. Filter to colors below AA, short of AAA or to review. Colors the browser computes in lab(), as on Tailwind v4 sites, are now measured instead of failing.

• Assets as tiles (Pro). Every image, icon and background shows its name, type, size and how many elements use it. Download or copy one (an SVG's code or the image), or Download all as a ZIP. Downloads keep the image's full address, so pictures from image services arrive intact.

• Tabs that stay put. Colors and Assets stay open on an element without colors or assets, instead of sending you back to Inspect.

• Element menus that name things. The level's menu and Select child list elements by tag, text and classes, with a filter for long lists. Moving up to a parent skips wrappers that draw no box.

• Isolate, Hide and Collapse, explained (Pro). Tooltips say what each one does and where, and a line under the buttons shows what's on, with Show or Exit. Inspect keeps reading the element as the page has it, and the buttons now find the right element on pages full of look-alike cards.

• Why, redrawn (Pro). Point at the diamond before a property for its source, and click it for the full story under the row: variables, result, CSS and breakpoints.

On the Free plan, Inspect shows the same grouped CSS read-only, and copying a property is free. Click a value, or point at Diff, Colors or Assets, to see what Pro adds there.

👆 Touch simulation that taps like a phone

Touch simulation now sends what a real finger sends, so mobile menus, forms and carousels behave in your panes the way they do on a phone. Turn it on from the arrow next to Navigate → Touch simulation → Enable.

• Taps that do what taps do. A click arrives as a touch tap: touch pointer events first, then the mouse events a phone sends. Hover menus open on a tap and close when you tap somewhere else.

• Forms you can fill. Tap a text field and type, with the caret where you tapped. Select, date, time and color fields open their pickers.

• Menus that stay open. Most menus that close on a press outside them no longer close before your tap lands, and buttons inside web components get the tap themselves.

• Carousels that swipe. Drag or fling a scroll-snap carousel and it settles on the next slide. Dragging the page still scrolls and flings it.

• Only the left button taps. A right or middle click no longer opens links.

• Every narrow pane is a touch screen. Touch simulation works in each pane narrower than your scrollbar Show from width, 992 px by default, and the menu says so under Enable. Raise it to 1200 px and an iPad in landscape becomes a touch screen too.

• Your tools come first. Inspect, Edit text and Measure pause touch simulation while they are on, in Split View as well. And in Split View with click sync on, one tap is one click in each pane.

🔁 Sync that keeps up

Selection sync and click sync now mirror what you meant, in every pane. Find both under the arrow next to Navigate → Sync.

• The same words, whatever the layout. Select text in one pane and the others select the same words and scroll them into view. That now holds even when a page renders different elements at different widths, where the other panes used to pick the wrong paragraph or nothing.

• A click is not a selection. Clicking into text no longer scrolls your other panes. Their old selections simply clear.

• Fast keyboard selections keep up. Extend a selection with Shift and the arrow keys as fast as you like, and every pane follows to the last letter.

• Unsynced panes keep their own. A selection in an unsynced pane stays in that pane, and a selection you make with selection sync off is no longer wiped by another pane.

• The caret stays put. With click sync on, clicking into a text field or editable text leaves the caret where you clicked, so typing lands there instead of at the start.

🧪 SEO and validation that show their work (Pro)

• Validation asks before it sends. Open View mode → Page → CSS validation or HTML validation, and Pixefy tells you exactly what will leave your browser before anything does. A public page is validated by its URL, which the W3C service fetches itself.

• Local pages, your choice. A page on localhost, a .local name or a private network address offers Send rendered HTML or Send readable CSS instead, and nothing is sent until you click it.

• Partial checks say so. When some stylesheets can't be read, the CSS result is marked Partial CSS check with the number of stylesheets not checked.

• An honest SEO score. A check that can't run, because the site or the network blocks it, now says it could not be checked instead of counting against you. The score says how many completed checks it uses.

• Broken links on a budget. Check Broken Links tests up to 200 links for up to 60 seconds, and Stop checking ends it early.

🔐 Signing in, signing out and going Pro

• One sign-in for every tab. Sign in or out in one tab and your other Pixefy tabs follow: new account details show up right away, and a sign-out or an account switch carries over to them too.

• Sign out means signed out. Signing out now also ends your session with Pixefy's sign-in service, so the next sign-in starts fresh. Signing out from several tabs at once finishes cleanly, in Firefox too.

• Your settings from the first second. Pixefy opens with your account's settings already in place, instead of opening with defaults and switching a second later. Changes from another device arrive the first time you return to the tab.

• Upgrading to Pro, right the first time. The checkout now opens even when you have to sign in first. Pro switches on in every tab as soon as the payment goes through, and the Pro window closes to confirm it. A second click on Upgrade no longer opens a second checkout, and messages appear as Pixefy notifications instead of browser alerts.

🛠️ Fixes and polish

• Activity tab. All shows "Nothing here yet" instead of a blank panel when a page holds only isolation entries. Opening Activity no longer rewrites your saved edits, so colors keep the format you typed and reverting restores the right value. Hide changes no longer stays on after you close the panel.

• Adding panes. The + menu opens even when Pixefy can't reach its online device list, using the list built into the extension. A new pane scrolls into view instead of landing off-screen.

• Device filter. Adding a pane from another device group while a filter is on now shows all your panes again, with All selected.

• Scrollbars. An empty or invalid Show from width keeps the last valid one instead of breaking scrollbar hiding.

• Full-page screenshots. Sticky headers and sidebars stay where the layout puts them, so pages with a sticky sidebar no longer collapse in the capture.

• In-page links. Links to a #section, and pages that open at one, no longer shift the workspace or leave a blank band under the pane.

• Plain http:// sites. Pane presets now save and load on sites served without HTTPS, where they used to fail.

• Synced and unsynced panes. A pane you unsynced stays unsynced after any number of reloads. Returning to Split View no longer stalls for half a minute after you left it while panes were still loading one by one.

• Single-page apps. Navigation inside single-page apps is followed reliably in every pane, and the loading bar shows on the pane that is actually loading.

• Firefox. ZIP downloads now finish: Assets' Download all, screenshot ZIPs and the Activity export. Content a site adds to its own page, such as a site builder's editor bar, no longer shows through Split View.