Build accessible web applications following WCAG 2.1/2.2 guidelines with proper semantic HTML, ARIA attributes, keyboard navigation, screen reader support, and inclusive design. Use when implementing ARIA labels and roles, ensuring keyboard navigation, supporting screen readers, providing text alternatives for images, managing focus, creating accessible forms, building inclusive UI components, testing with accessibility tools, meeting WCAG compliance levels, or designing for users with disabilities.
Use when: Designing UIs, implementing components, ensuring compliance with accessibility standards (WCAG 2.1/2.2).
<!-- ✅ Proper semantic structure -->
<header><nav><ul><li><a></a></li></ul></nav></header>
<main><article><h1></h1><p></p></article></main>
<footer></footer>
<!-- ❌ Div soup -->
<div class="header"><div class="nav"></div></div>
<button aria-label="Close dialog">×</button>
<nav aria-label="Main navigation"></nav>
<input aria-describedby="email-error" />
<div role="alert" aria-live="polite">Success</div>
function Modal({ onClose }: { onClose: () => void }) {
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
document.addEventListener('keydown', handleEscape);
return () => document.removeEventListener('keydown', handleEscape);
}, [onClose]);
return <div role="dialog" aria-modal="true" tabIndex={-1}>...</div>;
}
const firstFocusableElement = dialogRef.current?.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
)[0];
firstFocusableElement?.focus();
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer