skills.rest
rodrigo-altissimo
rodrigo-altissimoCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill design-heydon-pickering
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dragoscirjandragoscirjan

lang-html

Enforce semantic HTML, WCAG 2.1 AA accessibility, and keyboard navigability.

Community
Basic
bipinksbipinks
3

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

Community
Advanced
rodrigo-altissimorodrigo-altissimo

design-andy-bell

Design and audit browser-first CSS architectures using CUBE CSS and intrinsic layout primitives.

Community
Advanced
daffy0208daffy0208
34

Accessibility Engineer

Audit web UIs for WCAG 2.1 AA compliance and keyboard navigation.

Community
Intermediate