Last updated on

アクセシビリティ仮基準を明文化する(Must/Should・段階運用・自己確認)

  • Web
  • アクセシビリティ
  • 運用
  • フロントエンド

この記事の目的

次の3つを、一つの文書として整理しておきたいためのメモ兼紹介です。

  1. 明文化 — 自分(および同じテンプレ・運用を使う人)向けに、「アクセシビリティで最低限ここまでは揃えたい」という仮のラインを言葉に落とす。
  2. 確認 — 新規実装・修正のたびに、自分で棚卸しできるよう、Must / Should短いチェックリストを同じ枠に置く。
  3. 紹介 — 外部向けに「何を採用していて、何を目標にしていないか(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(新規・触った部分では満たす)

既存の未着手箇所は触ったら直す、でよい、という前提です。

  1. 意味のある HTML — 見出しは h1h6、本文は p やリスト、操作は button / a / フォーム。装飾の div だけで主な操作や見出しを表現しない。
  2. 画像の代替テキスト — 情報を伝える img には内容に合う alt装飾のみalt=""テンプレで差し込む場合は、プロジェクトのエスケープ方針**に従う(例: EJS 系では ty_stripTags 等を属性に併用)。
  3. フォームとラベルlabel[for]、包囲、適切な aria-label など、プログラム的に名前が付くようにする。ラベル無しの入力だけにしない(例外的にやむを得ないときは、意図をコメントで明記する狭小ケースに限る)。
  4. キーボード — 操作要素はタブで到達し、Enter / Space 等で主操作が行える。onClick だけの div 疑似ボタンを新たに増やさない。
  5. フォーカスの可視性 — グローバルに outline: none だけを当て、代替表示を置かないことは、新規 CSS では行わない。既存は修正時に :focus-visibleデザイントークンに寄せる、が目安。
  6. 色だけに依存しない — エラー・必須・成功の状態をだけにしない。テキスト・アイコン・aria-* など、冗長な手がかりのいずれかを同じ塊に含める。
  7. メディア・動き — 自動再生・無限ループ・大きな動きを入れる場合は、prefers-reduced-motion: reduce を考慮する(新規ではスタイルに反映。既存は該当ファイルを触ったときに可)。

4. Should(余力・新規コンポーネントで優先)

  • sectionaria-labelledby: 中にすでに見出しがあり DOM から関係が読めるなら、名前付けのためだけaria-labelledbyid必須にしない型録・デモでは可読性を優先して省略してよい、という整理。
  • 1 ページ 1 h1、見出しレベルの飛ばしに注意。
  • ランドマークheader / nav / main / footer 等)をサイトのレイアウトに合わせ、乱立させない。
  • モーダル(dialog 等) — 開いているあいだのフォーカス閉じる手がかり。テンプレに型録があるなら、上書き前に参照する。
  • 装飾の SVG には、適切なら aria-hidden="true" 等を検討

5. Later(基準改訂や一括候補)

  • eslint-plugin-jsx-a11y 等の段階的導入(変更ファイルだけ lint など。導入は別コミットが望ましい)。
  • コントラスト比の数値目標(AA 等)の明文化と、Sass トークンへの落とし込み。
  • サードパーティ(Splide 等)の既知制約の一覧と、許容・回避の方針。

6. 段階的に合わせる運用

  1. 新規(ページ・パーツ・スタイル・スクリプト)— 当該範囲で Must を満たす。
  2. 既存の修正 — 手を入れたブロック・ファイルの範囲で、Must のうち壊れている箇所を直す。無関係な大規模リファクタはしない。
  3. 触っていない箇所 — そのままでよい。全体の一斉監査を待たない
  4. 基準の改訂 — 版を上げ(0.2 …)、正本の表と変更履歴を更新。各リポの stub の「版メモ」等も同じ改訂に合わせる(stub に全文は戻さない運用)。

7. 修正・新規向けチェックリスト(要約)

PR 前・自己確認用。今回の変更に該当しないものは飛ばしてよい、という想定です。

  • 見出し・ボタン・リンク・フォームの要素が、役割に合っている
  • 画像 alt が、情報装飾のどちらかに合っている
  • フォームにラベルまたは同等の名前がある
  • 新規のクリック専用 div を増やしていない
  • フォーカスを消すだけのスタイルを新設していない
  • 状態表現を色だけにしていない
  • 大きな動き・自動再生に prefers-reduced-motion配慮(新規時)

(文言は正本のチェックリストと揃えています。)


8. 出典・参照(抜粋)

  • Understanding WCAG 2.1意図の把握用。本基準は特定レベルへの適合を宣言しない。)
  • 条文・変更履歴はナレッジの wiki/a11y-baseline.md を参照。

9. 所感

「アクセシビリティにどこまで投資するか」には価値判断が入るので、一度ラインを文章化し、新規と修正のたびにだけ上げていく、というやり方にした。後から厳しさを上げるときは、正本の版を上げればよい。本記事は、その中身のブログ用サマリとして使い、細部の正は Wiki に寄せる、という分業です。