菜单
Use when designing or auditing for screen reader compatibility — semantic HTML, ARIA roles and states, live regions, announcements, reading order, and hidden content. Trigger when the user mentions screen reader, VoiceOver, NVDA, JAWS, accessibility tree, ARIA, or assistive technology.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or product personality.
Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.
Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.
Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy, information architecture, microcopy, or editorial design.
Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.
Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.
| name | canon-screen-reader |
| description | Use when designing or auditing for screen reader compatibility — semantic HTML, ARIA roles and states, live regions, announcements, reading order, and hidden content. Trigger when the user mentions screen reader, VoiceOver, NVDA, JAWS, accessibility tree, ARIA, or assistive technology. |
Screen readers traverse the accessibility tree, not the visual layout. If the tree is wrong, the interface is wrong for blind and low-vision users.
Screen readers understand HTML elements natively. ARIA is a patch for when HTML can't express the role.
| Need | Use HTML | Not |
|---|---|---|
| Button | <button> | <div role="button"> |
| Link | <a href> | <span onClick> |
| Heading | <h1>–<h6> | <div class="heading"> |
| List | <ul>/<ol> | <div class="list"> |
| Table | <table> with <th> | CSS grid of <div> |
| Landmark | <main>, <nav>, <header>, <footer> | <div class="nav"> |
| Dialog | <dialog> | <div class="modal"> |
Headings create the document outline. Screen reader users navigate by heading. Skip levels or misused headings break this navigation.
<h1> per page.<h3> because you want smaller text; use CSS.The first rule of ARIA: don't use ARIA if HTML does the job. The second rule: if you use ARIA, use it correctly and completely.
Common ARIA patterns done right:
<!-- Live region for dynamic updates -->
<div role="status" aria-live="polite">3 results found</div>
<!-- Custom disclosure -->
<button aria-expanded="false" aria-controls="panel">Details</button>
<div id="panel" hidden>...</div>
<!-- Tab interface → see canon-tabs -->
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Use for: labels that are visually implied, skip links before focus, extra context.
| Role | Urgency | Use |
|---|---|---|
role="status" / aria-live="polite" | Low — waits for pause | Search result count, save confirmation |
role="alert" / aria-live="assertive" | High — interrupts | Error messages, time-sensitive warnings |
The container must exist in the DOM before content is injected. Don't mount and unmount live-region elements.
| Anti-pattern | Why it fails |
|---|---|
aria-label on a non-interactive element | Most screen readers ignore it on <div> |
Redundant ARIA (<button role="button">) | Noise |
aria-hidden="true" on focusable elements | Focus lands on invisible element |
| Using only color/icon for status | Screen reader doesn't announce visual changes |
| Heading levels skipped | Navigation breaks |
display: none for "hiding" content from sighted users but wanting SR to read it | Hides from everyone |
Test with at least one screen reader:
Quick smoke test: navigate the entire page with Tab + arrow keys while listening.
<h1>, no skipped heading levels<main>, <nav>, <header>, <footer> presentalt or alt="".sr-only class available for hidden labelsaria-hidden on focusable elements