§ 04.29 — Pixy Puala · WordPress blocks · Accessibility · 2026

Block Accessibility Pattern Lab

WORDPRESS BLOCKS · WAI-ARIA

Accessibility inside blocks is usually asserted rather than proven. This lab takes four interaction patterns from the design-system lab and ships each as a real block, then verifies insertion, attribute editing and enhanced frontend markup in a live install.

Maintainer
Pixy Puala
Vertical
WordPress blocks · Accessibility
Year
2026
Role
Open source
Stack
TypeScript
Status
● Public repo
§ 04.29.B

Problem

What was broken

Block developers have no testable reference for accessible interaction patterns, so each project re-derives ARIA from memory and gets it subtly wrong. Unit tests in jsdom prove the logic but say nothing about whether the block actually registers, saves attributes, and enhances markup in WordPress.

§ 04.29.C

Constraints

Boundaries · published
01 Engagement Open source · authored and maintained
02 Stack TypeScript · @wordpress/scripts
03 Scope 4 patterns · 4 installable blocks
04 Audience Block developers · design-system teams
§ 04.29.D

Decisions

Three · defended
Decision · 01

Every pattern is a real block, not a demo page

block.json plus edit/save/view per pattern means the work is installable and reviewable in the editor — the environment where the accessibility actually has to hold.

Decision · 02

Verified in a running install

Insertion, attribute editing and enhanced frontend markup were confirmed in WordPress 7.0.2 on PHP 8.2 with recorded command output and a clean WP_DEBUG log.

Decision · 03

The unproven list is published

Screen-reader behaviour, non-Chromium browsers, and multiple instances of one block on a page are named as not yet verified. An honest gap list is more useful than a green badge.

§ 04.29.E

Build

Stack · tooling · what it runs on

Stack

  • ▸ TypeScript · @wordpress/scripts
  • ▸ Node 20+ · pnpm
  • ▸ block.json · edit.tsx · save.tsx · view.ts per block
  • ▸ Vitest · axe-core
  • ▸ WP_DEBUG / WP_DEBUG_LOG clean run

Tooling

  • ✓ kept pnpm · Vitest · axe-core · wp-env
§ 04.29.F

Results · Measured

Countable facts · from the repository
Tests
67 passing
ARIA · keyboard · metadata · axe
Blocks
4 shipped
installable
Runtime check
WP 7.0.2 live
PHP 8.2 · debug clean

Runtime verification with recorded command output is committed in docs/RUNTIME-VERIFICATION.md.

§ 04.29.G

Tradeoffs

What was not fixed

Screen-reader behaviour, browsers outside Chromium, and multiple instances of the same block on a single page are explicitly unverified. Those are the three places block accessibility usually breaks, which is why they are named rather than quietly omitted.

Want this shape in your stack? The code is public. The judgement is the service.

Read the source → Start a project