메뉴
WCAG 2.1/2.2 Level AA compliance for WordPress themes, plugins, and blocks. Covers automated audits, keyboard navigation, screen reader testing, ARIA patterns, and color contrast.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Capture clean, Mac-faithful WordPress admin + front-end screenshots from a JSON brief. Headless Chromium, login-aware, hides update bubbles and admin notices, defaults to 2× DPR, and writes a standalone HTML gallery alongside the PNGs. Works against any WordPress site you have credentials for.
Security-first WordPress development for 6.9+. Covers plugin architecture, block development (apiVersion 3, Interactivity API), block themes with theme.json, REST API, Abilities API, and the Security Trinity.
Engineering workflows for WordPress development including compound planning, code review, documentation generation, and git worktree strategies.
Product management frameworks for WordPress plugins — persona creation, Jobs to Be Done, feature hypothesis testing, positioning, problem framing, and user stories.
Craft effective AI prompts and technical blog posts. Covers prompt structure, cross-platform compatibility, token optimization, anti-patterns, and WordPress publishing workflows.
UI/UX review with motion design specifications. Covers animation principles, easing tokens, duration guidelines, WordPress Design System (WPDS) patterns, and interaction audit methodology.
| name | WordPress Accessibility |
| description | WCAG 2.1/2.2 Level AA compliance for WordPress themes, plugins, and blocks. Covers automated audits, keyboard navigation, screen reader testing, ARIA patterns, and color contrast. |
| triggers | ["accessibility","a11y","WCAG","screen reader","keyboard navigation","ARIA","color contrast","focus indicator","alt text","accessible"] |
WCAG 2.1/2.2 Level AA compliance for WordPress development. Practical, actionable findings for themes, plugins, and block-based content.
Check HTML output for common violations:
lang attribute on <html>All interactive elements must be:
aria-live="polite")<th>) and captions<button
aria-expanded="false"
aria-controls="panel-1"
>
Toggle Panel
</button>
<div id="panel-1" hidden>
Panel content
</div>
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">Dialog Title</h2>
<p>Content here.</p>
<button>Close</button>
</div>
<nav aria-label="Primary">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about" aria-current="page">About</a></li>
</ul>
</nav>
<div aria-live="polite" aria-atomic="true">
<!-- Dynamic content updates announced by screen readers -->
</div>
| Context | Minimum Ratio |
|---|---|
| Normal text (< 18pt) | 4.5:1 |
| Large text (>= 18pt or 14pt bold) | 3:1 |
| UI components & graphics | 3:1 |
| Non-text contrast (borders, icons) | 3:1 |
// In render.php
<div <?php echo get_block_wrapper_attributes(); ?>>
<h2><?php echo esc_html( $attributes['title'] ); ?></h2>
<p><?php echo esc_html( $attributes['description'] ); ?></p>
</div>
// Use labels for all controls
<TextControl
label={ __( 'Title', 'my-plugin' ) }
value={ title }
onChange={ setTitle }
/>
// Group related controls
<PanelBody title={ __( 'Settings', 'my-plugin' ) }>
<ToggleControl
label={ __( 'Show icon', 'my-plugin' ) }
checked={ showIcon }
onChange={ setShowIcon }
/>
</PanelBody>
Critical — blocks core functionality:
Major — significant barrier:
Minor — usability issue:
aria-current on active nav items# axe-core via Playwright
npx playwright test --grep a11y
# pa11y CLI
npx pa11y https://localhost:8888
// Playwright a11y test
import AxeBuilder from '@axe-core/playwright';
test( 'homepage is accessible', async ( { page } ) => {
await page.goto( '/' );
const results = await new AxeBuilder( { page } ).analyze();
expect( results.violations ).toHaveLength( 0 );
} );