Verified:GitHub

design-heydon-pickering

Design and remediate accessible web components with semantic HTML and ARIA.

Updated May 6, 2025

Search Tags:#inclusive design #accessibility #semantic html #progressive enhancement #keyboard support #aria patterns #intrinsic layout

Ready to run

npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill design-heydon-pickering

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-heydon-pickering
Source: https://github.com/rodrigo-altissimo/qiartificial/tree/main/.claude/skills/design/heydon-pickering
Command: npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill design-heydon-pickering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create and repair web UI so it works reliably for everyone, starting with semantic HTML, correct ARIA only when necessary, and progressive enhancement.

Core Features & Use Cases

Inclusive component construction: produce components with semantic foundations, keyboard interaction, state management, assistive-technology announcements, and graceful layer-by-layer enhancement.
ARIA pattern remediation: audit existing components, identify semantic gaps, apply ARIA correctly, and ensure the missing behavior and screen-reader announcements are implemented.
Intrinsic layout planning: compose responsive layouts using Every Layout-style primitives without relying on breakpoint-heavy approaches.

Quick Start

Ask the Heydon Pickering skill to audit your component for accessibility and return a prioritized remediation plan for semantics, ARIA, keyboard support, and screen reader announcements.

Frequently Asked Questions about design-heydon-pickering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit a web component for accessibility and WCAG 2.1 AA compliance?▼

To audit a web component for accessibility and WCAG 2.1 AA compliance, you identify semantic HTML gaps, incorrect ARIA usage, and keyboard interaction failures, then generate a prioritized remediation plan mapping state changes and screen-reader announcements.

What is progressive enhancement layering for inclusive web components?▼

Progressive enhancement layering builds inclusive web components by establishing a functional HTML-only foundation first, then adding CSS for visual layout, and finally applying JavaScript and ARIA for full interactive behavior and assistive technology support.

When do I need ARIA patterns for semantic HTML elements?▼

You need ARIA patterns for semantic HTML elements only when native semantics are insufficient to convey state, role, or property changes to assistive technologies, ensuring missing keyboard behaviors and screen-reader announcements are correctly implemented.

How do I create intrinsic CSS layouts without breakpoint-heavy approaches?▼

To create intrinsic CSS layouts without breakpoint-heavy approaches, you compose responsive designs using Every Layout-style primitives that adapt naturally to available space rather than relying on fixed media query breakpoints.

Can I fix existing keyboard support and ARIA patterns in my web UI?▼

Yes, you can fix existing keyboard support and ARIA patterns by remediating components through semantic gap identification, applying correct ARIA attributes only when necessary, and ensuring missing keyboard behaviors and screen-reader announcements are fully implemented.

What's the best way to ensure screen-reader announcements match component state changes?▼

The best way to ensure screen-reader announcements match component state changes is to map interactive state transitions to ARIA live regions or property updates during component construction, validating announcements across HTML-only and full experience layers.