菜单
Enforces WCAG 2.1 Level AA accessibility for Black Trigram — semantic HTML, ARIA, keyboard navigation, 4.5:1/3:1 contrast, screen reader support, and prefers-reduced-motion for inclusive Korean martial arts gameplay
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Hack23/blacktrigram --skill accessibility-wcag-patterns命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Enforces systematic threat modeling for Black Trigram using STRIDE, MITRE ATT&CK, and attack trees — maintains THREAT_MODEL.md and FUTURE_THREAT_MODEL.md aligned with Hack23 Threat Modeling Policy and Secure Development Policy §3.2
Enforces C4 Architecture Model documentation standards for Black Trigram. Ensures ARCHITECTURE.md, DATA_MODEL.md, FLOWCHART.md, STATEDIAGRAM.md, MINDMAP.md, SWOT.md and their FUTURE_* variants are maintained with strategic, rule-based principles.
Enforces AI governance for Black Trigram — transparent and accountable AI-assisted development aligned with Hack23 AI Governance Policy, EU AI Act, NIST AI RMF, and Information Security Policy
基于 SOC 职业分类
正在显示 SKILL.md
| name | accessibility-wcag-patterns |
| description | Enforces WCAG 2.1 Level AA accessibility for Black Trigram — semantic HTML, ARIA, keyboard navigation, 4.5:1/3:1 contrast, screen reader support, and prefers-reduced-motion for inclusive Korean martial arts gameplay |
| license | MIT |
Strategic Principle: Accessible software is usable software. Build inclusive experiences that work for everyone, regardless of ability.
Enforce WCAG 2.1 Level AA accessibility standards for Black Trigram, ensuring the game is usable by people with diverse abilities including those using assistive technologies.
Reference: Hack23 ISMS Secure Development Policy
IF (creating Html overlay component OR modifying UI)
THEN (use semantic HTML: <nav>, <main>, <button>, <label>, headings hierarchy)
ELSE (reject - div soup is not accessible)
IF (custom interactive component without native HTML equivalent)
THEN (add proper ARIA roles, labels, and states)
ELSE (use native HTML elements - first rule of ARIA)
IF (interactive element in UI overlay)
THEN (ensure keyboard accessible: Tab, Enter, Escape, Arrow keys)
ELSE (reject - mouse-only interactions exclude keyboard users)
IF (text on background using KOREAN_COLORS)
THEN (verify WCAG AA contrast ratio: 4.5:1 normal text, 3:1 large text)
ELSE (adjust colors while maintaining Korean cyberpunk aesthetic)
IF (game state change OR combat action result)
THEN (announce via aria-live region with appropriate politeness)
ELSE (screen reader users miss critical game information)
import { Html } from '@react-three/drei';
// ✅ GOOD: Accessible overlay
<Html fullscreen>
<main role="application" aria-label="Black Trigram Combat">
<nav aria-label="Combat controls">
<button
aria-label="공격 | Attack"
aria-pressed={isAttacking}
onClick={handleAttack}
data-testid="attack-button"
>
공격 | Attack
</button>
</nav>
<div role="status" aria-live="polite" aria-atomic="true">
{combatMessage}
</div>
</main>
</Html>
// ❌ BAD: Inaccessible overlay
<Html fullscreen>
<div onClick={handleAttack}>Attack</div>
<>{combatMessage}
// ✅ Focus trap for modal dialogs
const dialogRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (isOpen) dialogRef.current?.focus();
}, [isOpen]);
<div
ref={dialogRef}
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title"
tabIndex={-1}
>
<h2 id="dialog-title">일시정지 | Pause</h2>
</div>
// ✅ Bilingual accessible text
<span lang="ko">공격</span> | <span lang="en">Attack</span>
// ✅ Screen reader description for Korean terms
<abbr title="Hapkido - Korean martial art of joint locks and throws">
합기도
</abbr>
| Criterion | Requirement | Black Trigram Context |
|---|---|---|
| 1.1.1 Non-text Content | Alt text for images | 3D scene descriptions |
| 1.3.1 Info and Relationships | Semantic structure | Html overlay headings |
| 1.4.3 Contrast | 4.5:1 ratio | Korean color palette |
| 2.1.1 Keyboard | All functionality | Combat controls |
| 2.4.3 Focus Order | Logical tab order | UI overlay navigation |
| 3.1.2 Language of Parts | Lang attributes | Korean/English text |
| 4.1.2 Name, Role, Value | ARIA for custom widgets | Game UI components |
data-testid on all interactive elements흑괘의 접근성 - Accessibility of the Black Trigram