# html-spec-craft (informative reference)
folio Layer 0 spec HTML を「読みやすく / accessible に」書くための knowledge pool。 normative ではなく **informative**。 folio-architect SKILL.md は薄く保ち、 詳細は本 reference から pull する (Progressive Disclosure pattern、 [Anthropic skill-development 公式 docs](https://github.com/anthropics/claude-code/blob/main/plugins/plugin-dev/skills/skill-development/SKILL.md) と整合)。
本 reference は rules.html `§4.6 Accessibility Minimum Rules` (normative) の根拠 verbatim 引用集 + 業界 HOW knowledge の集約。 spec author (人間および `folio-architect`) は editing 中に必要に応じ本 reference を pull する。
## 0. 適用範囲
- folio `architecture/spec/` 配下の HTML spec、 ADR、 constitution
- folio-architect skill が生成する HTML spec の templating reference
- folio rules.html `§4.6` Accessibility Minimum Rules の補強材料
## 1. WCAG 2.2 verbatim quote (rules.html §4.6 根拠)
### 1.1 SC 1.4.3 Contrast (Minimum), Level AA
> "The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:"
- 例外: large-scale text **3:1** (18 point / 14 point bold)、 incidental text、 logotype
- 出典: https://www.w3.org/TR/WCAG22/#contrast-minimum (W3C Document License、 出典明記で verbatim 引用可)
### 1.2 SC 1.4.6 Contrast (Enhanced), Level AAA
> "The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:"
- 例外: large text 4.5:1、 incidental、 logotype
- 出典: https://www.w3.org/TR/WCAG22/#contrast-enhanced
### 1.3 SC 1.4.11 Non-text Contrast, Level AA
> "The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):"
- 対象: User Interface Components + **Graphical Objects (parts of graphics required to understand the content)**
- ★ 注記: mermaid SVG fill への適用は **WCAG 文言上の解釈**。 W3C 公式の mermaid SVG 特化解釈文書は不在。
- 出典: https://www.w3.org/TR/WCAG22/#non-text-contrast
### 1.4 SC 1.1.1 Non-text Content, Level A
> "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below."
- 例外: controls (name 必須)、 time-based media、 tests、 sensory、 CAPTCHA、 decoration
- ★ mermaid SVG に `accDescr` 必要となる根拠
- 出典: https://www.w3.org/TR/WCAG22/#non-text-content
## 2. mermaid a11y 仕様 (rules.html §4.6 根拠)
### 2.0 mermaid loader — vendored MUST (CDN 不可)
mermaid を採用する spec の `` に置く loader は **vendored 1 file** を参照する:
```html
```
- パスは spec の位置に対する相対 (folio 慣習: spec が `architecture/spec/` 配下なら `../assets/` = `architecture/assets/mermaid.min.js`)。 folio 自身の全 spec (constitution / rules / relations / self-spec / verification / README) がこの形を使う。
- **runtime CDN (`https://cdn.jsdelivr.net/npm/mermaid...` / `unpkg` / ES module `import ... from 'https://...'`) は MUST NOT** — [rules.html §8 REQ-DA-JS-2](../../../architecture/spec/rules.html#s8-js-governance) が「library は vendoring (no runtime CDN)」「ES modules + `fetch()` は file:// 破綻ゆえ不使用」と規定する。 no-cloud 原則 (生成物が外部 fetch なしで完結) にも整合。
- **consumer は mermaid.min.js を自分で vendoring する** (`folio init` は assets/ を scaffold しない = REQ-DA-JS-2 の「自分の lib は自分で vendor」)。 未 vendoring の段階でも raw `` syntax は人間に可読 (graceful degradation、 §8 / grilling-protocol.md)。 図の visual render は consumer が `architecture/assets/mermaid.min.js` を置いた時点で有効化される。
- loader を classic `