#21スコア 4.5/5基盤UI・汎用

AI にブログ記事ページを作らせてみた — a11y の"根"が見えた（やってみた #21）

ルート: /blog/post
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI にブログ記事ページを作らせてみた — a11y の"根"が見えた（やってみた #21）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 長文ブログ/記事ページ。

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

#20 で「a11y はまだ class 単位の loop」と分かった。記事ページは見出し階層とコードブロックの a11y を最も突ける——だから選んだ。

結果 — 4.5/5（in-component の a11y バグはゼロ）

tsc/build 緑・コンソール 0・hydration なし・375px overflow 0・h1 は1個・レベル飛ばしなし・目次アンカー全解決。

そして cold AI の重要な所見:

個別コンポーネントは収束してる。今回、コンポーネント内部の新しい a11y バグはゼロ。CopyButton の a11y も正しい。

一番良かった — CodeBlock が本物

  • "use client" ＋ 決定的な regex ハイライタ（Shiki を実行時に使わない）→ hydration mismatch ゼロ。
  • copy ボタンに aria-label・role="status" の live region で "Copied" を通知。
  • <pre overflow-x-auto> で 375px でもコンポーネント内スクロール（ページは溢れない）。行番号も整列。

でも"根"が見えた — a11y が再発する本当の理由

新 a11y バグは出なかった。でも cold AI が構造を言い当てた:

① DocNote が note/warning/tip を表現できない。 variant が default/reference のみ、見出しが <div>、role/icon 無し。docs は callout 部品と謳うが、実際の admonition は出せず自前 Callout を作る羽目 → #109。

② Prose / Heading / Typography primitive が無い。 consumer が h1-h6・prose 間隔・blockquote・目次を毎回手巻き。「1つの h1・レベル飛ばし禁止」を強制する共有コンポーネントが無い → #110。

これまで component ごとに直してきた a11y 見出し問題（#104 EmptyState/StatusScreen 等）は、この "typography primitive の不在" の症状だった。個別は収束してるが、穴が1段上（ページ単位の見出し階層）に移った。a11y を本当に "収束" させたいなら、次に閉じるべきはこの軸。

学び — a11y は「潰す」より「根を断つ」段階へ

〜#20: a11y を component ごとに潰してきた（#57/#71/#83/#87/#93/#104）
#21:   個別は収束。だが "根"＝typography/Heading primitive の不在 が見えた
次:    Heading/Prose を新設し、見出し階層を source で保証＝per-page 再発を断つ

a11y の loop は、もぐら叩きから "根を断つ" 段階に入った。 <Heading level> ＋ <Prose> を作れば、長文ページの見出し階層が DS 側で保証され、#104 のような「ページごとの a11y 穴」が構造的に出なくなる。これは patch じゃなく architecture——beta ゲートで作り込む。

（#21 の発見はすべて architectural／docs で、今回 land する個別修正は無し。Heading/Prose・DocNote 拡張は beta ゲートへ。）

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

  • ランディング / 価格比較 / Docs ホーム ほか。typography 軸と上位部品を引き続き。

試す

まだ alpha。個別 a11y は収束、次は"根"の typography 層——もぐら叩きから一段上がる。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AvatarAvatarFallbackAvatarImageBadgeBreadcrumbBreadcrumbItemBreadcrumbLinkBreadcrumbListBreadcrumbPageBreadcrumbSeparatorButtonCardCardContentCardDescriptionCardFooterCardHeaderCardTitleCodeBlockDocNoteSeparatorTagTextLink

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。