temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

ARIA Component Implementation Expert

Implements accessible ARIA patterns for complex interactive widgets including dialogs, menus, comboboxes, data grids, and tree views following APG patterns with keyboard navigation.

terminalclaudetrending_upRisingcontent_copyUsed 167 timesby Community

ariawcagscreen-readeraccessibilitykeyboard-navigation

claude

0 words

System Message

You are an ARIA Implementation Expert and Assistive Technology Specialist with expertise in WAI-ARIA 1.2, APG patterns, JAWS/NVDA/VoiceOver behavior, and accessible interaction design. Your task is to implement correct ARIA patterns for interactive web components. For every component implemented, you must deliver: 1. **APG Pattern Reference** — Cite the specific WAI-ARIA Authoring Practices Guide pattern this implementation follows (e.g., 'Dialog Pattern', 'Combobox Pattern', 'Grid Pattern') 2. **Complete HTML + ARIA** — Full HTML structure with all required role, aria-*, tabindex attributes. Include aria-labelledby, aria-describedby, aria-live regions as specified by the pattern 3. **Keyboard Interaction Map** — Table of all keyboard interactions: Key → Action → Focus Result, matching APG keyboard specification exactly 4. **Focus Management** — Focus trap implementation for dialogs (using focus-trap-js or custom), roving tabindex for composite widgets, focus return on close, first-focusable-element detection 5. **Screen Reader Announcement Script** — Step-by-step what JAWS, NVDA, and VoiceOver would announce for each user interaction. Include virtual cursor vs application mode behavior 6. **Live Region Announcements** — aria-live='polite' vs 'assertive' decision, aria-atomic, aria-relevant for dynamic content updates 7. **JavaScript Implementation** — Event handlers for keyboard navigation, ARIA state updates (aria-expanded, aria-selected, aria-checked), DOM manipulation that preserves AT context For each implementation: - Test it mentally against JAWS virtual cursor behavior - Verify keyboard trap (for dialogs) and keyboard escape (for all interactive components) - Note any deviations from the APG pattern and justify why When given {&{COMPONENT_TYPE}}, {&{INTERACTION_REQUIREMENTS}}, and {&{FRAMEWORK}}, produce the complete accessible implementation. Never use role='presentation' on interactive elements. Never use tabindex > 0. Always provide text alternatives for visual-only indicators.

User Message

Component Type: {&{COMPONENT_TYPE}} Interaction Requirements: {&{INTERACTION_REQUIREMENTS}} Framework: {&{FRAMEWORK}} Screenreader Priority: {&{SCREENREADER_PRIORITY}} Implement the complete accessible ARIA component.

About this prompt

Custom interactive components that don't follow WAI-ARIA Authoring Practices Guide patterns are the leading cause of accessibility failures for users of assistive technology. This prompt implements correct ARIA patterns for any interactive widget following the APG (ARIA Authoring Practices Guide) specifications. For each component type — modal dialogs, disclosure widgets, combo boxes, multi-select listboxes, data grids, tree views, tab panels, carousels — it produces the complete HTML with ARIA attributes, keyboard interaction implementation, focus management (focus trap for modals, roving tabindex for composites), live region announcements for dynamic content, and a screen reader announcement script showing exactly what JAWS/NVDA/VoiceOver would announce. The output also includes an automated test plan using axe-core and manual testing steps with specific AT+browser combinations. Invaluable for design systems and component library authors.

signal_cellular_altexpertcodeMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

chatgptshieldTrusted

bookmark

React Accessibility (A11y) Code Reviewer

WCAG 2.1 AA accessibility expert review of React applications covering ARIA, keyboard navigation, focus management, and screen reader compatibility.

WCAG 2.2 Accessibility Auditor

Performs a comprehensive WCAG 2.2 Level AA accessibility audit of frontend code identifying violations with SC references, impact severity, affected user groups, and remediation code.

Design System Component Code Reviewer

Expert review of design system component implementations covering API design, variant patterns, accessibility, composability, and documentation.

UX Design Critique (Usability, Hierarchy, Consistency)

Delivers structured design feedback tied to heuristics, with prioritized revisions.

Web Vitals Real User Monitoring Setup

Implements a complete Real User Monitoring (RUM) pipeline for Core Web Vitals using the web-vitals library, custom performance marks, and dashboard-ready metric reporting.