Stop Guessing A11y: Auto-Generate Playwright Tests from Your GraphQL Schema
summary
Claim: add lightweight @a11y hints (directives: label, role, template, token) to a GraphQL schema, run a single-file Node generator that emits a JSON spec and Playwright tests, and let the browser prove semantics. Demo annotates a small schema, generates tests from a three‑movie sample, shows a failing assertion, fixes the template and reruns to green, then runs Playwright + axe-core audits. Targets five to ten screens, enforces CI failures, and cites 1.3 billion people and 71% leaving inaccessible sites.
AI-written summary · about
chapters (32)
- 0:00Auto-Generating Accessibility Tests From a GraphQL Schema
- 1:09Speaker Intro - Vanessa Johnson, Android Engineer, The New York Times
- 1:42The Core Idea: Declare Semantics Once, Generate Tests, Let the Browser Prove It
- 2:42Why Accessibility Matters: 1.3 Billion People, 71% Leave Immediately
- 3:44Common WCAG Failures and Why They Happen Late
- 5:16Accessibility as a Coat of Paint - The Architect Analogy
- 5:47Pain Points: No Single Source of Truth, Brittle Client-Side Stitching
- 6:47Building the Accessibility String on the Client, and Why It Breaks
- 8:18Three Chefs, No Recipe: Why This Becomes Unmaintainable
- 8:49The Claim: The Server Should Ship Semantics Too
- 9:20Schema as a Contract - Client Agnostic, CI Enforced
- 9:50Design Constraints: Additive, Optional, Meaning Not Presentation
- 10:23The Directive Catalogue: Label, Role, Template, Token
- 11:24Accessibility Label as the Primary Screen Reader Identifier
- 11:54Accessibility Token: Type, Priority, Unit Prefix and Suffix
- 12:24Accessibility Template: Turning Fields Into Natural Sentences
- 13:56Annotating a Movie Type With All Three Directives
- 15:29Querying the Schema and Getting the Summary Back
- 16:31The Summary Only Includes What You Query For
- 17:03Why the Browser Is the Thing Under Test, Not GraphQL
- 18:04Translating Schema Intent Into Browser Assertions
- 19:04The Generated JSON Spec as a Contract
- 19:36The Generated Playwright Test Plus an Axe Core Audit
- 21:08Why These Tests Are Less Flaky - Anchored to Semantics
- 22:09Live Demo: Generating the Spec and Test File
- 22:41A Test That Fails Over a Period - Precision vs Noise
- 23:42Fixing the Template and Re-Running to Green
- 24:13Screen Reader Demo: The Row Announced as One Coherent Sentence
- 25:15The Fragmented Version and Why That Failure Is the Point
- 26:52Adopting This: Start With Five to Ten Screens, Prioritise Repeated Patterns
- 28:23Establishing a Glossary and Assigning Ownership
- 28:55Final Thoughts: Declare Once, Generate, Let CI Catch Drift
related talks
01h 31mAdvanced Playwright with AI
14mAdvanced Playwright Techniques for flawless testing
51mAdvanced Playwright Techniques for Flawless Testing
28mAutomating Accessibility with Playwright
17mTesting with Playwright in an AI-Assisted Development World
10mCreate, Run and Deploy end-to-end tests with Playwright and GitHub Actions
29mPlaying your tests wright
13mHow to Use Playwright for Automating Accessibility Testing