Menu
WCAG 2.2 checklist for accessible markup. Always-active rules for every generated interface.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".
WordPress operations with WP-CLI — search-replace, plugin/theme management, cron, cache, DB export/import, automation. Always-active rules when using wp commands.
How to use Figma MCP and Variables2CSS to read designs from Figma and generate code consistent with tokens. Use when the designer shares a Figma link.
WordPress backend performance optimization — profiling, queries, object cache, autoload, cron, and remote HTTP. Always-active rules when investigating slowness issues.
| name | accessibility |
| description | WCAG 2.2 checklist for accessible markup. Always-active rules for every generated interface. |
| user-invocable | false |
Generated markup MUST be accessible. These rules apply always, even during prototyping.
rem, em, %) for spacing, text, and containers — NEVER hardcoded pxuser-scalable="no" or maximum-scale="1" to the meta viewporth1-h6) with logical hierarchy: only one h1 per page, then h2 for sections, h3 for sub-sections. Never skip levels$headingTag with a reasonable default for the context<ul>/<ol> + <li> for lists, <blockquote> for quotes<header>, <nav>, <main>, <aside>, <footer>, <section>, <article>aria-label (e.g., <nav aria-label="Main menu">)<title> (managed by WordPress title-tag)lang="it" on <html> (managed by language_attributes())lang="en" on the container elementfor pointing to the field's idrequired and/or aria-required="true"autocomplete for personal data (name, email, tel, street-address)<fieldset> + <legend> (e.g., radio group, address)aria-describedbyaria-describedby, use aria-invalid="true" on the fieldBlade field example:
<div class="{{PREFIX}}:flex {{PREFIX}}:flex-col {{PREFIX}}:gap-1">
<label for="email" class="{{PREFIX}}-body-sm {{PREFIX}}:font-medium {{PREFIX}}-content-01">
{{ __('Email', '{{TEXT_DOMAIN}}') }} <span class="{{PREFIX}}:text-error">*</span>
</label>
<input
id="email"
type="email"
required
autocomplete="email"
aria-describedby="email-help"
class="{{PREFIX}}-input"
/>
<p id="email-help" class="{{PREFIX}}-body-xs {{PREFIX}}-content-03">
{{ __('Useremo questa email per risponderti.', '{{TEXT_DOMAIN}}') }}
</p>
</div>
Field with error example:
<input
id="email"
type="email"
required
aria-invalid="true"
aria-describedby="email-error"
class="{{PREFIX}}-input {{PREFIX}}-border-error"
/>
<p id="email-error" role="alert" class="{{PREFIX}}-body-xs {{PREFIX}}:text-error">
{{ __('Inserisci un indirizzo email valido.', '{{TEXT_DOMAIN}}') }}
</p>
<img alt="Meaningful description"><img alt=""> (empty alt, not omitted)aria-hidden="true" focusable="false"role="img" aria-label="Description"aria-hidden="true" on the icon elementvertical-divider, etc.): ALWAYS alt="" — they are decorative<table>, <thead>, <th>, <tbody>, <td> for tabular data — NEVER for layout<th> with scope="col" or scope="row"<caption> or aria-labelledby for the caption (can be hidden with {{PREFIX}}:sr-only)--color-focusring (#025ecc)<button>, <a>, <input>, <select> — NEVER <div onclick>tabindex values)tabindex="0" (tabbable) or tabindex="-1" (focusable via JS)<a role="button"> — use <a> for navigation, <button> for actionstarget="_blank": add <span class="{{PREFIX}}:sr-only">{{ __('(si apre in una nuova finestra)', '{{TEXT_DOMAIN}}') }}</span>aria-current="page" (not just CSS classes)role="status"role="alert"aria-expanded, aria-controls, aria-haspopup where appropriateapp.blade.php — implemented)<iframe>: always with a descriptive title attributearia-hidden="true")a11y-checklist.md (in this skill's directory)docs/a11y-known-issues.md