AI にブログ記事ページを作らせてみた — アクセシビリティの"根"が見えた（やってみた #21）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠長文ブログ/記事ページ⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /blog/post に、パンくず・タイトル・著者・タグ、目次、h2/h3 の本文、リスト、引用、複数の CodeBlock、囲み（callout）、関連記事。

#20 で「アクセシビリティはまだ、種類ごとに直す段階」と分かりました。記事ページは⁠見出しの階層とコードブロックのアクセシビリティを、いちばん突けます⁠——だから選びました。

結果 — 4.5/5（コンポーネント内部のアクセシビリティ・バグはゼロ）

tsc/build 緑・コンソール 0・サーバーとブラウザの表示ずれ（hydration）なし・375px でのはみ出し0・⁠h1 は1個・見出しレベルの飛ばしなし・目次のアンカーは全部つながる⁠。

そして予備知識ゼロの AI の重要な所見:

個別のコンポーネントは安定している。⁠今回、コンポーネント内部の新しいアクセシビリティ・バグはゼロ⁠。CopyButton のアクセシビリティも正しい。

一番良かった — CodeBlock が本物

• "use client" ＋ ⁠結果が毎回同じになる正規表現ベースのハイライト（Shiki を実行時に使わない）→ サーバーとブラウザの表示ずれ（hydration mismatch）ゼロ⁠。
• コピーボタンに aria-label・⁠role="status" の読み上げ領域で "Copied" を通知⁠。
• <pre overflow-x-auto> で、375px でも⁠コンポーネントの中でスクロール⁠（ページ全体は溢れない）。行番号もそろう。

でも"根"が見えた — アクセシビリティが再発する本当の理由

新しいアクセシビリティ・バグは出ませんでした。でも予備知識ゼロの AI が⁠その構造を言い当てました⁠:

⁠① DocNote が note/warning/tip を表現できない。⁠ バリエーションが default/reference だけ、見出しが <div>、役割やアイコンも無い。docs は「囲み（callout）コンポーネント」と謳うのに、実際の注記の囲みは出せず、自前で Callout を作る羽目に → #109。

⁠② Prose / Heading / Typography のコンポーネントが無い。⁠ 使う側が h1-h6・本文の間隔・引用・目次を⁠毎回手組み⁠。⁠「h1 は1つ・見出しレベルの飛ばし禁止」を保証する共有コンポーネントが無い⁠ → #110。

これまでコンポーネントごとに直してきた見出しのアクセシビリティ問題（#104 EmptyState/StatusScreen 等）は、⁠この "typography 用コンポーネントの不在" の症状⁠でした。個別は安定してきたけれど、⁠欠落が1段上（ページ単位の見出し階層）に移った⁠。アクセシビリティを本当に "収束" させたいなら、次に閉じるべきはこの軸です。

学び — アクセシビリティは「潰す」より「根を断つ」段階へ

〜#20: アクセシビリティをコンポーネントごとに潰してきた（#57/#71/#83/#87/#93/#104）
#21:   個別は安定。だが "根"＝typography/Heading コンポーネントの不在 が見えた
次:    Heading/Prose を新設し、見出し階層をソースで保証＝ページごとの再発を断つ

⁠アクセシビリティの取り組みは、もぐら叩きから "根を断つ" 段階に入りました。⁠ <Heading level> ＋ <Prose> を作れば、長文ページの見出し階層がデザインシステム側で保証され、#104 のような「ページごとのアクセシビリティの欠落」が⁠構造的に出なくなります⁠。これはその場しのぎの修正ではなく設計そのもの——beta ゲートで作り込みます。

（#21 の発見はすべて設計／docs まわりで、今回その場で反映する個別修正はありません。Heading/Prose・DocNote の拡張は beta ゲートへ。）

次回予告（やってみた #22）

• ⁠ランディング / 価格比較 / Docs ホーム⁠ ほか。typography の軸と上位コンポーネントを引き続き。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#20
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。個別のアクセシビリティは安定、次は"根"の typography 層——もぐら叩きから一段上がります。