この記事の目的
次の3つを、一つの文書として整理しておきたいためのメモ兼紹介です。
- 明文化 — 自分(および同じテンプレ・運用を使う人)向けに、「アクセシビリティで最低限ここまでは揃えたい」という仮のラインを言葉に落とす。
- 確認 — 新規実装・修正のたびに、自分で棚卸しできるよう、Must / Should と短いチェックリストを同じ枠に置く。
- 紹介 — 外部向けに「何を採用していて、何を目標にしていないか(WCAG 宣言の代替ではない、など)を誤解なく示す。
条文の正本は、ナレッジベースの wiki/a11y-baseline.md です。本記事はそれと同じ版の要約であり、数値の追従は Wiki 側の表記を正とします。
文書の位置づけ(v0.1.3 相当)
| 項目 | 内容 |
|---|---|
| 版 | 0.1.3(仮) |
| 有効日 | 2026-04-25 前後の整理 |
| 本番の「何が宣言できるか」 | WCAG 2.1/2.2 の A・AA への自己宣言や監査の代替ではない |
| スコープ | ユーザー向け HTML / CSS /(該当する)クライアント JS。静的か CMS かは問わない |
| 正本 | ナレッジの wiki/a11y-baseline.md。制作テンプレ各所の docs/.../a11y-baseline は案内(stub)で、EJS や型録などリポ固有事項だけ足す想定 |
1. 目的とスコープ
- 目的: 「どこまでやるか」を文書化し、新規追加・修正のたびに、手元のコードベースへ少しずつ近づける(一括改修に依存しない)。
- スコープ: ユーザー向け UI のソース。ビルド成果物の最終診断や、顧客サイト全体の契約上の合否は、ここでは定義しない。
2. 意図的に扱わないこと(非目標)
- WCAG レベルへの自己宣言、第三者監査の代替。
- 全 HTML の一斉点検を前提にした品質保証(CI でのスナップは将来、任意で検討するイメージ)。
- 動画の必須キャプション、PDF のタグ付けなど — 必要なら案件・別文書に切り出す。
3. 基準: Must(新規・触った部分では満たす)
既存の未着手箇所は触ったら直す、でよい、という前提です。
- 意味のある HTML — 見出しは
h1〜h6、本文はpやリスト、操作はbutton/a/ フォーム。装飾のdivだけで主な操作や見出しを表現しない。 - 画像の代替テキスト — 情報を伝える
imgには内容に合うalt。装飾のみはalt=""。テンプレで差し込む場合は、プロジェクトのエスケープ方針**に従う(例: EJS 系ではty_stripTags等を属性に併用)。 - フォームとラベル —
label[for]、包囲、適切なaria-labelなど、プログラム的に名前が付くようにする。ラベル無しの入力だけにしない(例外的にやむを得ないときは、意図をコメントで明記する狭小ケースに限る)。 - キーボード — 操作要素はタブで到達し、Enter / Space 等で主操作が行える。
onClickだけのdiv疑似ボタンを新たに増やさない。 - フォーカスの可視性 — グローバルに
outline: noneだけを当て、代替表示を置かないことは、新規 CSS では行わない。既存は修正時に:focus-visibleとデザイントークンに寄せる、が目安。 - 色だけに依存しない — エラー・必須・成功の状態を色だけにしない。テキスト・アイコン・
aria-*など、冗長な手がかりのいずれかを同じ塊に含める。 - メディア・動き — 自動再生・無限ループ・大きな動きを入れる場合は、
prefers-reduced-motion: reduceを考慮する(新規ではスタイルに反映。既存は該当ファイルを触ったときに可)。
4. Should(余力・新規コンポーネントで優先)
sectionとaria-labelledby: 中にすでに見出しがあり DOM から関係が読めるなら、名前付けのためだけのaria-labelledby/idは必須にしない。型録・デモでは可読性を優先して省略してよい、という整理。- 1 ページ 1
h1、見出しレベルの飛ばしに注意。 - ランドマーク(
header/nav/main/footer等)をサイトのレイアウトに合わせ、乱立させない。 - モーダル(
dialog等) — 開いているあいだのフォーカス、閉じる手がかり。テンプレに型録があるなら、上書き前に参照する。 - 装飾の SVG には、適切なら
aria-hidden="true"等を検討。
5. Later(基準改訂や一括候補)
eslint-plugin-jsx-a11y等の段階的導入(変更ファイルだけ lint など。導入は別コミットが望ましい)。- コントラスト比の数値目標(AA 等)の明文化と、Sass トークンへの落とし込み。
- サードパーティ(Splide 等)の既知制約の一覧と、許容・回避の方針。
6. 段階的に合わせる運用
- 新規(ページ・パーツ・スタイル・スクリプト)— 当該範囲で Must を満たす。
- 既存の修正 — 手を入れたブロック・ファイルの範囲で、Must のうち壊れている箇所を直す。無関係な大規模リファクタはしない。
- 触っていない箇所 — そのままでよい。全体の一斉監査を待たない。
- 基準の改訂 — 版を上げ(0.2 …)、正本の表と変更履歴を更新。各リポの stub の「版メモ」等も同じ改訂に合わせる(stub に全文は戻さない運用)。
7. 修正・新規向けチェックリスト(要約)
PR 前・自己確認用。今回の変更に該当しないものは飛ばしてよい、という想定です。
- 見出し・ボタン・リンク・フォームの要素が、役割に合っている
- 画像
altが、情報か装飾のどちらかに合っている - フォームにラベルまたは同等の名前がある
- 新規のクリック専用
divを増やしていない - フォーカスを消すだけのスタイルを新設していない
- 状態表現を色だけにしていない
- 大きな動き・自動再生に
prefers-reduced-motionの配慮(新規時)
(文言は正本のチェックリストと揃えています。)
8. 出典・参照(抜粋)
- Understanding WCAG 2.1(意図の把握用。本基準は特定レベルへの適合を宣言しない。)
- 条文・変更履歴はナレッジの
wiki/a11y-baseline.mdを参照。
9. 所感
「アクセシビリティにどこまで投資するか」には価値判断が入るので、一度ラインを文章化し、新規と修正のたびにだけ上げていく、というやり方にした。後から厳しさを上げるときは、正本の版を上げればよい。本記事は、その中身のブログ用サマリとして使い、細部の正は Wiki に寄せる、という分業です。