[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JWH8CMDRWATCEA96HH85NP":3,"skill-same:01M6JWH8CMDRWATCEA96HH85NP":81},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":54,"repositoryHtmlUrl":55,"repositoryHomepageUrl":56,"ownerHtmlUrl":57,"ownerBlogUrl":58,"ownerDescription":59,"updatedAt":60,"install":61,"resources":74},"01M6JWH8CMDRWATCEA96HH85NP","accessibility-perceivable",null,"Use this skill when the question is whether users can *perceive* the content — see it, hear it, or feel it — regardless of impairment. Trigger when designing color systems, picking text sizes, building image-heavy surfaces, working with video\u002Faudio, designing for low-vision users, or running an accessibility audit. Covers WCAG Principle 1 (Perceivable). Sub-aspect of `accessibility`; read that first if you haven't already.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1571,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fprocess-and-robustness-principles\u002Fskills\u002Faccessibility-perceivable\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"accessibility","accessibility perceivable","running","image","when","for","can","you","color","users","trigger","surfaces","vision","use","read","question","text","WCAG","Audio","Video","accessibility audit","audit","2026-11-10 10:12:30",false,"---\nname: accessibility-perceivable\ndescription: 'Use this skill when the question is whether users can *perceive* the content — see it, hear it, or feel it — regardless of impairment. Trigger when designing color systems, picking text sizes, building image-heavy surfaces, working with video\u002Faudio, designing for low-vision users, or running an accessibility audit. Covers WCAG Principle 1 (Perceivable). Sub-aspect of `accessibility`; read that first if you haven''t already.'\n---\n\n# Accessibility — Perceivable\n\nWCAG Principle 1: information and user-interface components must be presentable to users in ways they can perceive.\n\nThe four sub-criteria, simplified:\n\n1. **Text alternatives** for non-text content.\n2. **Time-based media** (audio\u002Fvideo) has alternatives.\n3. **Adaptable** content can be presented in different ways without losing structure.\n4. **Distinguishable** — color contrast, audio control, text resizing.\n\nThis skill covers each in practical detail.\n\n## 1. Text alternatives\n\n### Images\n\nEvery image gets alternative text describing what's relevant about it. The right alt text depends on the image's role:\n\n```html\n\u003C!-- Informative: describe what the user needs to know -->\n\u003Cimg src=\"\u002Fdashboard-screenshot.png\"\n     alt=\"Dashboard showing $48,200 monthly revenue, up 12% from last month.\" \u002F>\n\n\u003C!-- Functional (image as link \u002F button): describe the action -->\n\u003Ca href=\"\u002Fprofile\">\n  \u003Cimg src=\"\u002Favatar.png\" alt=\"Open your profile\" \u002F>\n\u003C\u002Fa>\n\n\u003C!-- Decorative: empty alt so screen readers skip -->\n\u003Cimg src=\"\u002Fdecorative-pattern.svg\" alt=\"\" aria-hidden=\"true\" \u002F>\n\n\u003C!-- Complex (chart, infographic): brief alt + linked long description -->\n\u003Cfigure>\n  \u003Cimg src=\"\u002Fsales-chart.png\"\n       alt=\"Quarterly sales chart, see description below.\"\n       aria-describedby=\"chart-desc\" \u002F>\n  \u003Cfigcaption id=\"chart-desc\">\n    Sales rose from $12k in Q1 to $58k in Q4, with a dip to $31k in Q3 caused\n    by a supply chain interruption.\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n**Common mistakes:**\n- `alt=\"image\"` or `alt=\"photo of woman\"` — describes the file type, not the meaning.\n- Decorative images with non-empty alt — screen reader users hear \"decorative-pattern-3-svg\" announced as content.\n- Long alt text on simple images — alt should be ≤ 125 characters; longer goes in `\u003Cfigcaption>` or linked description.\n\n### Icons\n\nIcon-only buttons need an accessible name. Two patterns:\n\n```html\n\u003C!-- Pattern A: aria-label on the button -->\n\u003Cbutton aria-label=\"Close\">\n  \u003Csvg aria-hidden=\"true\">...\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n\n\u003C!-- Pattern B: visually-hidden text -->\n\u003Cbutton>\n  \u003Csvg aria-hidden=\"true\">...\u003C\u002Fsvg>\n  \u003Cspan class=\"sr-only\">Close\u003C\u002Fspan>\n\u003C\u002Fbutton>\n```\n\nEither is fine; pattern B can be more reliable across screen readers. The `sr-only` class:\n\n```css\n.sr-only {\n  position: absolute;\n  width: 1px; height: 1px;\n  padding: 0; margin: -1px;\n  overflow: hidden;\n  clip: rect(0,0,0,0);\n  white-space: nowrap;\n  border: 0;\n}\n```\n\n### Decorative SVG\n\n```html\n\u003Csvg aria-hidden=\"true\" focusable=\"false\">...\u003C\u002Fsvg>\n```\n\n`aria-hidden` removes from accessibility tree; `focusable=\"false\"` prevents keyboard focus on the SVG (some browsers focus SVGs by default).\n\n## 2. Time-based media\n\n### Video\n\n- **Captions** for all spoken content. Auto-generated captions are a starting point; review for accuracy.\n- **Audio descriptions** for visual content not conveyed by audio (a chart appearing on screen, a character action shown but not narrated).\n- **Transcripts** as text alternatives for anyone who can't watch.\n\n### Audio\n\n- **Transcripts** for podcasts, interviews, voicemails.\n- **Captions or transcripts** for any audio-only message in the UI.\n\n### Auto-playing media\n\nDon't autoplay video or audio with sound. WCAG 1.4.2 requires that audio playing for more than 3 seconds either:\n\n- Has a pause\u002Fstop control, or\n- Has a volume control independent of system volume.\n\nBetter: don't autoplay sound at all. It's hostile to users with hearing aids, in public spaces, or sharing audio output.\n\n## 3. Adaptable\n\n### Semantic structure\n\nUse HTML elements for what they're for. Heading order matters; landmarks matter; lists matter.\n\n```html\n\u003C!-- Right -->\n\u003Cmain>\n  \u003Ch1>Dashboard\u003C\u002Fh1>\n  \u003Csection aria-labelledby=\"kpi-heading\">\n    \u003Ch2 id=\"kpi-heading\">This month\u003C\u002Fh2>\n    \u003Cul>\n      \u003Cli>Revenue: $48k\u003C\u002Fli>\n      \u003Cli>Users: 12,481\u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Fmain>\n\n\u003C!-- Wrong: divs everywhere, no structure -->\n\u003Cdiv>\n  \u003Cdiv>Dashboard\u003C\u002Fdiv>\n  \u003Cdiv>This month\u003C\u002Fdiv>\n  \u003Cdiv>Revenue: $48k\u003C\u002Fdiv>\n  \u003Cdiv>Users: 12,481\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\nScreen readers navigate by headings (`H` key in NVDA), landmarks (`R` key), lists, links. Without semantic structure, navigation falls apart.\n\n### Heading order\n\nDon't skip heading levels. Page structure:\n\n```\n\u003Ch1>Page title (one per page)\n  \u003Ch2>Section\n    \u003Ch3>Subsection\n      \u003Ch4>Sub-subsection\n```\n\nGoing from `\u003Ch1>` to `\u003Ch3>` confuses assistive tech. If the visual size you want for an `\u003Ch2>` is too large, restyle the `\u003Ch2>` — don't reach for `\u003Ch3>` to get smaller text.\n\n### Reading order\n\nSource order in HTML should match visual reading order. CSS Grid and Flexbox can rearrange visually, but screen readers follow source order.\n\n```html\n\u003C!-- Source order matches visual order: title, then summary, then details -->\n\u003Carticle>\n  \u003Ch2>Article title\u003C\u002Fh2>\n  \u003Cp class=\"summary\">Brief summary.\u003C\u002Fp>\n  \u003Cp>Detailed body...\u003C\u002Fp>\n\u003C\u002Farticle>\n\n\u003C!-- Wrong: visually rearranged but source order is now confusing -->\n\u003Carticle style=\"display: flex; flex-direction: column-reverse;\">\n  \u003Cp>Detailed body...\u003C\u002Fp>\n  \u003Cp>Summary.\u003C\u002Fp>\n  \u003Ch2>Title\u003C\u002Fh2>\n\u003C\u002Farticle>\n```\n\n### Programmatic relationships\n\nUse `\u003Clabel for>`, `aria-labelledby`, `aria-describedby` to expose visual relationships to assistive tech.\n\n```html\n\u003Cdiv>\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n  \u003Cinput id=\"email\" aria-describedby=\"email-help\" \u002F>\n  \u003Cp id=\"email-help\">We'll never share this.\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\nThe label is associated; the help text is associated. A screen reader announces all three together.\n\n## 4. Distinguishable\n\n### Color contrast\n\nWCAG ratios:\n\n| Content | Level AA | Level AAA |\n|---|---|---|\n| Body text (\u003C 18pt regular or \u003C 14pt bold) | 4.5:1 | 7:1 |\n| Large text (≥ 18pt regular or ≥ 14pt bold) | 3:1 | 4.5:1 |\n| UI components and graphical objects | 3:1 | (no AAA) |\n| Disabled \u002F inactive elements | (exempt) | (exempt) |\n\nTest every text-on-background combination. Common failures:\n\n- Light grey body text (`#999` on white = 2.85:1, fails AA).\n- Brand-color body links (`#1e90ff` on white = 3.4:1, fails AA for body text).\n- Placeholder text in inputs (often muted to look \"less important,\" ends up unreadable).\n\nTools: WebAIM Contrast Checker, Stark plugin, Chrome DevTools' contrast inspector.\n\n### Color not the only signal\n\nWCAG 1.4.1: don't use color alone to convey information. Pair with icon, text, pattern, or position.\n\n```html\n\u003C!-- Wrong: red border = error, but if red isn't perceivable, no signal -->\n\u003Cinput style=\"border: 2px solid red\" \u002F>\n\n\u003C!-- Right: red border + icon + descriptive text -->\n\u003Cdiv class=\"field\" data-state=\"error\">\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n  \u003Cinput id=\"email\" aria-invalid=\"true\" aria-describedby=\"email-error\" \u002F>\n  \u003Cp id=\"email-error\">\n    \u003CAlertIcon aria-hidden=\"true\" \u002F> Please enter a valid email.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n### Text resize\n\nWCAG 1.4.4: text must be resizable up to 200% without loss of content or functionality. Test:\n\n- Browser zoom at 200% — does content reflow without horizontal scroll?\n- Text size only at 200% (Firefox supports text-only zoom) — does the layout survive?\n\nUse relative units (`rem`, `em`, `%`) for type sizes; avoid `px` for body text. Use `vw`\u002F`vh` cautiously — they don't scale with text size.\n\n### Reflow\n\nWCAG 1.4.10 (Level AA): content reflows to a 320 CSS-pixel-wide viewport without requiring horizontal scrolling. Equivalent to 400% zoom on a 1280px viewport.\n\nPractical test: open the design in DevTools at 320px wide and 1280px wide. Anything that requires sideways scroll for primary content fails.\n\n### Images of text\n\nAvoid embedding text in images (which can't be resized, restyled, or read by screen readers). Render text as text wherever possible. SVG with `\u003Ctext>` elements is OK because it scales and can be read; raster images of text aren't.\n\n### Non-color content\n\nPatterns, textures, position, shape — non-color signals carry meaning for color-blind users:\n\n```html\n\u003C!-- Chart series with color + pattern -->\n\u003Csvg>\n  \u003Crect fill=\"url(#solid-blue)\" \u002F>     \u003C!-- Series A: solid blue -->\n  \u003Crect fill=\"url(#striped-blue)\" \u002F>   \u003C!-- Series B: striped blue -->\n  \u003Crect fill=\"url(#dotted-blue)\" \u002F>    \u003C!-- Series C: dotted blue -->\n\u003C\u002Fsvg>\n```\n\nEven users who can perceive color benefit from redundant signals.\n\n## Worked example: an accessible status badge system\n\n```html\n\u003Cstyle>\n  .badge { display: inline-flex; align-items: center; gap: 4px;\n           padding: 2px 8px; border-radius: 9999px;\n           font-size: 12px; font-weight: 500; }\n  .badge--success { background: hsl(142 70% 95%); color: hsl(142 70% 22%); }\n  .badge--warning { background: hsl(38 95% 95%); color: hsl(38 90% 25%); }\n  .badge--error   { background: hsl(0 80% 95%); color: hsl(0 75% 32%); }\n\u003C\u002Fstyle>\n\n\u003Cspan class=\"badge badge--success\">\n  \u003CCheckIcon aria-hidden=\"true\" \u002F> Paid\n\u003C\u002Fspan>\n\u003Cspan class=\"badge badge--warning\">\n  \u003CClockIcon aria-hidden=\"true\" \u002F> Pending\n\u003C\u002Fspan>\n\u003Cspan class=\"badge badge--error\">\n  \u003CAlertIcon aria-hidden=\"true\" \u002F> Overdue\n\u003C\u002Fspan>\n```\n\nWhat's working:\n\n- Color + icon + text — three signals.\n- Contrast ratios above 7:1 for both color combinations (verified in a contrast checker).\n- Icons have `aria-hidden` since the text already conveys meaning.\n- Background color tinted, foreground darkened, both relative to a hue rather than using full saturation (preserves AA contrast).\n\n## Anti-patterns\n\n- **`alt=\"image\"` or `alt=\"\"` on informative images.** Screen reader users get nothing.\n- **Color-only error states.** A red border with no text or icon. Color-blind users perceive no error.\n- **Pale-grey body text for elegance.** Below 4.5:1 contrast — looks polished, fails AA, exhausts users with low vision.\n- **Auto-playing video with sound.** Hostile to users in shared spaces, with hearing aids, on subway commutes.\n- **Heading shenanigans.** Using `\u003Ch2>` for \"I want this size\" rather than for structural meaning. Leaves `\u003Ch1>` missing or `\u003Ch2>` skipped.\n\n## Heuristics\n\n1. **The contrast checker pass.** Every text-on-background pair, every UI-element-against-background pair. Body must clear 4.5:1; large text and UI 3:1.\n2. **The grayscale pass.** Take a screenshot, convert to grayscale. Do all status indicators still parse?\n3. **The 200% zoom test.** Browser zoom to 200%. Layout survives? Buttons still hittable? No content lost?\n4. **The screen-reader pass.** With VoiceOver \u002F NVDA \u002F TalkBack, walk a critical flow. Listen for unlabeled controls, announced as \"blank,\" missing state.\n5. **The image audit.** Every `\u003Cimg>`. Alt text describes what the user needs to know. Decorative images have empty alt.\n\n## Related skills\n\n- **`accessibility`** (parent).\n- **`accessibility-operable`** — keyboard reach and target size.\n- **`accessibility-understandable`** — labels, copy, predictability.\n- **`accessibility-robust`** — semantic markup and ARIA.\n- **`color`** and **`hierarchy-color-and-tone`** (perception) — color decisions that respect contrast.\n- **`legibility`** and **`readability`** (perception) — type decisions that aid perception.\n","# Accessibility — Perceivable\n\nWCAG Principle 1: information and user-interface components must be presentable to users in ways they can perceive.\n\nThe four sub-criteria, simplified:\n\n1. **Text alternatives** for non-text content.\n2. **Time-based media** (audio\u002Fvideo) has alternatives.\n3. **Adaptable** content can be presented in different ways without losing structure.\n4. **Distinguishable** — color contrast, audio control, text resizing.\n\nThis skill covers each in practical detail.\n\n## 1. Text alternatives\n\n### Images\n\nEvery image gets alternative text describing what's relevant about it. The right alt text depends on the image's role:\n\n```html\n\u003C!-- Informative: describe what the user needs to know -->\n\u003Cimg src=\"\u002Fdashboard-screenshot.png\"\n     alt=\"Dashboard showing $48,200 monthly revenue, up 12% from last month.\" \u002F>\n\n\u003C!-- Functional (image as link \u002F button): describe the action -->\n\u003Ca href=\"\u002Fprofile\">\n  \u003Cimg src=\"\u002Favatar.png\" alt=\"Open your profile\" \u002F>\n\u003C\u002Fa>\n\n\u003C!-- Decorative: empty alt so screen readers skip -->\n\u003Cimg src=\"\u002Fdecorative-pattern.svg\" alt=\"\" aria-hidden=\"true\" \u002F>\n\n\u003C!-- Complex (chart, infographic): brief alt + linked long description -->\n\u003Cfigure>\n  \u003Cimg src=\"\u002Fsales-chart.png\"\n       alt=\"Quarterly sales chart, see description below.\"\n       aria-describedby=\"chart-desc\" \u002F>\n  \u003Cfigcaption id=\"chart-desc\">\n    Sales rose from $12k in Q1 to $58k in Q4, with a dip to $31k in Q3 caused\n    by a supply chain interruption.\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n**Common mistakes:**\n- `alt=\"image\"` or `alt=\"photo of woman\"` — describes the file type, not the meaning.\n- Decorative images with non-empty alt — screen reader users hear \"decorative-pattern-3-svg\" announced as content.\n- Long alt text on simple images — alt should be ≤ 125 characters; longer goes in `\u003Cfigcaption>` or linked description.\n\n### Icons\n\nIcon-only buttons need an accessible name. Two patterns:\n\n```html\n\u003C!-- Pattern A: aria-label on the button -->\n\u003Cbutton aria-label=\"Close\">\n  \u003Csvg aria-hidden=\"true\">...\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n\n\u003C!-- Pattern B: visually-hidden text -->\n\u003Cbutton>\n  \u003Csvg aria-hidden=\"true\">...\u003C\u002Fsvg>\n  \u003Cspan class=\"sr-only\">Close\u003C\u002Fspan>\n\u003C\u002Fbutton>\n```\n\nEither is fine; pattern B can be more reliable across screen readers. The `sr-only` class:\n\n```css\n.sr-only {\n  position: absolute;\n  width: 1px; height: 1px;\n  padding: 0; margin: -1px;\n  overflow: hidden;\n  clip: rect(0,0,0,0);\n  white-space: nowrap;\n  border: 0;\n}\n```\n\n### Decorative SVG\n\n```html\n\u003Csvg aria-hidden=\"true\" focusable=\"false\">...\u003C\u002Fsvg>\n```\n\n`aria-hidden` removes from accessibility tree; `focusable=\"false\"` prevents keyboard focus on the SVG (some browsers focus SVGs by default).\n\n## 2. Time-based media\n\n### Video\n\n- **Captions** for all spoken content. Auto-generated captions are a starting point; review for accuracy.\n- **Audio descriptions** for visual content not conveyed by audio (a chart appearing on screen, a character action shown but not narrated).\n- **Transcripts** as text alternatives for anyone who can't watch.\n\n### Audio\n\n- **Transcripts** for podcasts, interviews, voicemails.\n- **Captions or transcripts** for any audio-only message in the UI.\n\n### Auto-playing media\n\nDon't autoplay video or audio with sound. WCAG 1.4.2 requires that audio playing for more than 3 seconds either:\n\n- Has a pause\u002Fstop control, or\n- Has a volume control independent of system volume.\n\nBetter: don't autoplay sound at all. It's hostile to users with hearing aids, in public spaces, or sharing audio output.\n\n## 3. Adaptable\n\n### Semantic structure\n\nUse HTML elements for what they're for. Heading order matters; landmarks matter; lists matter.\n\n```html\n\u003C!-- Right -->\n\u003Cmain>\n  \u003Ch1>Dashboard\u003C\u002Fh1>\n  \u003Csection aria-labelledby=\"kpi-heading\">\n    \u003Ch2 id=\"kpi-heading\">This month\u003C\u002Fh2>\n    \u003Cul>\n      \u003Cli>Revenue: $48k\u003C\u002Fli>\n      \u003Cli>Users: 12,481\u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Fmain>\n\n\u003C!-- Wrong: divs everywhere, no structure -->\n\u003Cdiv>\n  \u003Cdiv>Dashboard\u003C\u002Fdiv>\n  \u003Cdiv>This month\u003C\u002Fdiv>\n  \u003Cdiv>Revenue: $48k\u003C\u002Fdiv>\n  \u003Cdiv>Users: 12,481\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\nScreen readers navigate by headings (`H` key in NVDA), landmarks (`R` key), lists, links. Without semantic structure, navigation falls apart.\n\n### Heading order\n\nDon't skip heading levels. Page structure:\n\n```\n\u003Ch1>Page title (one per page)\n  \u003Ch2>Section\n    \u003Ch3>Subsection\n      \u003Ch4>Sub-subsection\n```\n\nGoing from `\u003Ch1>` to `\u003Ch3>` confuses assistive tech. If the visual size you want for an `\u003Ch2>` is too large, restyle the `\u003Ch2>` — don't reach for `\u003Ch3>` to get smaller text.\n\n### Reading order\n\nSource order in HTML should match visual reading order. CSS Grid and Flexbox can rearrange visually, but screen readers follow source order.\n\n```html\n\u003C!-- Source order matches visual order: title, then summary, then details -->\n\u003Carticle>\n  \u003Ch2>Article title\u003C\u002Fh2>\n  \u003Cp class=\"summary\">Brief summary.\u003C\u002Fp>\n  \u003Cp>Detailed body...\u003C\u002Fp>\n\u003C\u002Farticle>\n\n\u003C!-- Wrong: visually rearranged but source order is now confusing -->\n\u003Carticle style=\"display: flex; flex-direction: column-reverse;\">\n  \u003Cp>Detailed body...\u003C\u002Fp>\n  \u003Cp>Summary.\u003C\u002Fp>\n  \u003Ch2>Title\u003C\u002Fh2>\n\u003C\u002Farticle>\n```\n\n### Programmatic relationships\n\nUse `\u003Clabel for>`, `aria-labelledby`, `aria-describedby` to expose visual relationships to assistive tech.\n\n```html\n\u003Cdiv>\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n  \u003Cinput id=\"email\" aria-describedby=\"email-help\" \u002F>\n  \u003Cp id=\"email-help\">We'll never share this.\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\nThe label is associated; the help text is associated. A screen reader announces all three together.\n\n## 4. Distinguishable\n\n### Color contrast\n\nWCAG ratios:\n\n| Content | Level AA | Level AAA |\n|---|---|---|\n| Body text (\u003C 18pt regular or \u003C 14pt bold) | 4.5:1 | 7:1 |\n| Large text (≥ 18pt regular or ≥ 14pt bold) | 3:1 | 4.5:1 |\n| UI components and graphical objects | 3:1 | (no AAA) |\n| Disabled \u002F inactive elements | (exempt) | (exempt) |\n\nTest every text-on-background combination. Common failures:\n\n- Light grey body text (`#999` on white = 2.85:1, fails AA).\n- Brand-color body links (`#1e90ff` on white = 3.4:1, fails AA for body text).\n- Placeholder text in inputs (often muted to look \"less important,\" ends up unreadable).\n\nTools: WebAIM Contrast Checker, Stark plugin, Chrome DevTools' contrast inspector.\n\n### Color not the only signal\n\nWCAG 1.4.1: don't use color alone to convey information. Pair with icon, text, pattern, or position.\n\n```html\n\u003C!-- Wrong: red border = error, but if red isn't perceivable, no signal -->\n\u003Cinput style=\"border: 2px solid red\" \u002F>\n\n\u003C!-- Right: red border + icon + descriptive text -->\n\u003Cdiv class=\"field\" data-state=\"error\">\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n  \u003Cinput id=\"email\" aria-invalid=\"true\" aria-describedby=\"email-error\" \u002F>\n  \u003Cp id=\"email-error\">\n    \u003CAlertIcon aria-hidden=\"true\" \u002F> Please enter a valid email.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n### Text resize\n\nWCAG 1.4.4: text must be resizable up to 200% without loss of content or functionality. Test:\n\n- Browser zoom at 200% — does content reflow without horizontal scroll?\n- Text size only at 200% (Firefox supports text-only zoom) — does the layout survive?\n\nUse relative units (`rem`, `em`, `%`) for type sizes; avoid `px` for body text. Use `vw`\u002F`vh` cautiously — they don't scale with text size.\n\n### Reflow\n\nWCAG 1.4.10 (Level AA): content reflows to a 320 CSS-pixel-wide viewport without requiring horizontal scrolling. Equivalent to 400% zoom on a 1280px viewport.\n\nPractical test: open the design in DevTools at 320px wide and 1280px wide. Anything that requires sideways scroll for primary content fails.\n\n### Images of text\n\nAvoid embedding text in images (which can't be resized, restyled, or read by screen readers). Render text as text wherever possible. SVG with `\u003Ctext>` elements is OK because it scales and can be read; raster images of text aren't.\n\n### Non-color content\n\nPatterns, textures, position, shape — non-color signals carry meaning for color-blind users:\n\n```html\n\u003C!-- Chart series with color + pattern -->\n\u003Csvg>\n  \u003Crect fill=\"url(#solid-blue)\" \u002F>     \u003C!-- Series A: solid blue -->\n  \u003Crect fill=\"url(#striped-blue)\" \u002F>   \u003C!-- Series B: striped blue -->\n  \u003Crect fill=\"url(#dotted-blue)\" \u002F>    \u003C!-- Series C: dotted blue -->\n\u003C\u002Fsvg>\n```\n\nEven users who can perceive color benefit from redundant signals.\n\n## Worked example: an accessible status badge system\n\n```html\n\u003Cstyle>\n  .badge { display: inline-flex; align-items: center; gap: 4px;\n           padding: 2px 8px; border-radius: 9999px;\n           font-size: 12px; font-weight: 500; }\n  .badge--success { background: hsl(142 70% 95%); color: hsl(142 70% 22%); }\n  .badge--warning { background: hsl(38 95% 95%); color: hsl(38 90% 25%); }\n  .badge--error   { background: hsl(0 80% 95%); color: hsl(0 75% 32%); }\n\u003C\u002Fstyle>\n\n\u003Cspan class=\"badge badge--success\">\n  \u003CCheckIcon aria-hidden=\"true\" \u002F> Paid\n\u003C\u002Fspan>\n\u003Cspan class=\"badge badge--warning\">\n  \u003CClockIcon aria-hidden=\"true\" \u002F> Pending\n\u003C\u002Fspan>\n\u003Cspan class=\"badge badge--error\">\n  \u003CAlertIcon aria-hidden=\"true\" \u002F> Overdue\n\u003C\u002Fspan>\n```\n\nWhat's working:\n\n- Color + icon + text — three signals.\n- Contrast ratios above 7:1 for both color combinations (verified in a contrast checker).\n- Icons have `aria-hidden` since the text already conveys meaning.\n- Background color tinted, foreground darkened, both relative to a hue rather than using full saturation (preserves AA contrast).\n\n## Anti-patterns\n\n- **`alt=\"image\"` or `alt=\"\"` on informative images.** Screen reader users get nothing.\n- **Color-only error states.** A red border with no text or icon. Color-blind users perceive no error.\n- **Pale-grey body text for elegance.** Below 4.5:1 contrast — looks polished, fails AA, exhausts users with low vision.\n- **Auto-playing video with sound.** Hostile to users in shared spaces, with hearing aids, on subway commutes.\n- **Heading shenanigans.** Using `\u003Ch2>` for \"I want this size\" rather than for structural meaning. Leaves `\u003Ch1>` missing or `\u003Ch2>` skipped.\n\n## Heuristics\n\n1. **The contrast checker pass.** Every text-on-background pair, every UI-element-against-background pair. Body must clear 4.5:1; large text and UI 3:1.\n2. **The grayscale pass.** Take a screenshot, convert to grayscale. Do all status indicators still parse?\n3. **The 200% zoom test.** Browser zoom to 200%. Layout survives? Buttons still hittable? No content lost?\n4. **The screen-reader pass.** With VoiceOver \u002F NVDA \u002F TalkBack, walk a critical flow. Listen for unlabeled controls, announced as \"blank,\" missing state.\n5. **The image audit.** Every `\u003Cimg>`. Alt text describes what the user needs to know. Decorative images have empty alt.\n\n## Related skills\n\n- **`accessibility`** (parent).\n- **`accessibility-operable`** — keyboard reach and target size.\n- **`accessibility-understandable`** — labels, copy, predictability.\n- **`accessibility-robust`** — semantic markup and ARIA.\n- **`color`** and **`hierarchy-color-and-tone`** (perception) — color decisions that respect contrast.\n- **`legibility`** and **`readability`** (perception) — type decisions that aid perception.\n",{"name":5,"description":7},"main","b0f0a87593c578a7898eccaf1b363f7f87c1f99b","plugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fprocess-and-robustness-principles\u002Fskills\u002Faccessibility-perceivable",490,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins","https:\u002F\u002Fhol.org\u002Fplugins\u002Fbest-codex-plugins","https:\u002F\u002Fgithub.com\u002Fhashgraph-online","https:\u002F\u002Fhol.org","Open-source standards and developer tools for interoperable AI agents: discovery, identity, communication, payments, privacy and security.","2026-11-14 02:12:02",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill accessibility-perceivable",{"tool":67,"command":68},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill accessibility-perceivable",{"tool":70,"command":71},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill accessibility-perceivable","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fprocess-and-robustness-principles\u002Fskills\u002Faccessibility-perceivable\u002FSKILL.md",true,[75],{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Fperceivable-deep-dive.md","REFERENCE","参考文档",5304,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fprocess-and-robustness-principles\u002Fskills\u002Faccessibility-perceivable\u002Freferences\u002Fperceivable-deep-dive.md",[82,90,97,104,129,154],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":89},"01M746ZWACVKMZ1BJXJZHYJSSX","migrate-to-e2e","Moves an existing Playwright, Cypress, Selenium, Appium, Detox, Maestro, or TesterArmy suite to e2e one slice at a time, with the old suite running beside the new one until each ported test is proven. Keeps a MIGRATION.md progress file so any later session resumes where the last stopped. Optionally plants a defect to show both suites catch it. Use for \u002Fmigrate-to-e2e, \"migrate our tests to e2e\", \"port these Maestro flows\", \"move our TesterArmy tests\", or when a project has an e2e config and an older suite still running.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fmigrate-to-e2e\u002FSKILL.md",[],[],"2026-11-11 15:11:14",{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":89},"01M746ZPTAX1Q0FBKAB1CYND7E","e2e","Writes, runs, and debugs end-to-end tests for web and mobile apps with e2e, the agentic test runner, which mixes agent.act goals with exact locator assertions on a Playwright browser or an iOS or Android device. Also drives a project's running app live over the e2e MCP server to look at a screen, check a UI change, take a screenshot or record a video, and try a locator; and runs bug bashes, parallel e2e explore runs with each bug proven by a repro test. Use when a project depends on e2e or has an e2e.config.ts, when asked for end-to-end, browser, mobile, or agentic UI tests, to check a change in the running app, to QA or bug bash an app or branch, or when an e2e run fails.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fe2e\u002FSKILL.md",[],[],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":89},"01M746ZJN784HVHMDP9MQGCSGG","create-verification-skill","Generate a project-local verify-\u003Capp> skill on top of e2e, so any coding agent can launch the app, check it is worth driving, exercise a feature the way a user does, keep evidence, and bug bash it. Writes the skill, a feature map with one explore charter per feature, and proves it once. Use for \u002Fcreate-verification-skill, \"make a verification skill for this repo\", or when a project has no scripted way to prove UI behavior.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fcreate-verification-skill\u002FSKILL.md",[],[],{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":46},"01M716A6ETNB9B1SQ3GXZC75VR","deja-search","deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[111,112,113,114,115,116,117,118,119,120,121,28,31,122,123,124,125,126,127,128],"search","deja search","never","error","ready","memory","re","decide","fix","design","debugging","done","reviewer","io","change","cli","merge","past",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":135,"publishedAt":46},"01M716A3J2W5SENSE9VGMXB375","deja-reflect","End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-reflect\u002FSKILL.md",[],[136,137,138,124,139,140,141,142,143,144,145,146,147,148,116,149,150,151,152,153],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":167,"publishedAt":46},"01M715T3RR4BAYSR57HPPTJ0PF","revid","Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftmakersas\u002Frevid-skills\u002Fskills\u002Frevid\u002FSKILL.md",[160,161,164],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":162,"categoryName":163,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":165,"categoryName":166,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[156,168,43,169,170,171,172,150,173,117,174,175,176,177,28,27,178,179,180,181],"URL","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","mcp server","schedule","api","publish"]