// 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
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
Enforces code quality standards for Black Trigram — maintainable, type-safe TypeScript with low complexity, organized imports, explicit error handling, and search-before-create discipline
Enforces data protection at every stage of its lifecycle for Black Trigram — classification, HTTPS/TLS 1.2+, CSP, SRI, minimal retention, aligned with Hack23 Data Classification Policy and GDPR Articles 5, 25, 32
Enforces consistent documentation standards for Black Trigram — JSDoc/TSDoc completeness, architecture currency, bilingual Korean-English content, and security documentation updates
| 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>
<div>{combatMessage}</div>
</Html>
// ✅ 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