📚 ナレッジベース

02-10_アクセシビリティ

最終更新 2026年08月25日／ 21_ナレッジベース/マニュアル_ナレッジ/制作部署/02-10_アクセシビリティ.md

出典: 制作部署マニュアルアクセシビリティ（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）

アクセシビリティとは

「誰もが使えるサイト」を作ること。視覚障害・聴覚障害・高齢者・色覚特性のある人・キーボードだけで操作する人...全員が情報にアクセスできる設計。

アクセシビリティ対応 = 「義務」ではなく「事業機会」
日本の障害者人口約1,000万人 + 高齢者約3,600万人 = 潜在ユーザー4,000万人超

なぜアクセシビリティが大事か

法的観点

障害者差別解消法（2024年4月改正・民間も合理的配慮が義務化）
大企業ではWCAG 2.1 AA準拠が求められる流れ
訴訟リスク（米国では集団訴訟事例多数）

ビジネス観点

ユーザー数増 = 売上機会増
SEO効果（Googleもアクセシビリティ評価）
高齢化社会 = アクセシビリティ重要度UP
ブランド価値向上

倫理的観点

「誰も取り残さない」設計
企業の社会的責任

WCAG（Web Content Accessibility Guidelines）

世界標準のアクセシビリティガイドライン。

3レベル

レベル	内容	対応
A	最低限	必須
AA	標準	推奨（実質必須）
AAA	最高水準	限定的に達成可能

→ TERASUはWCAG 2.1 AA準拠を目指す。

4原則（POUR）

知覚可能（Perceivable）：見える・聞ける
操作可能（Operable）：使える
理解可能（Understandable）：分かる
堅牢（Robust）：あらゆる環境で使える

1. 知覚可能：見える・聞ける

色のコントラスト

要素	最低コントラスト比
通常テキスト（〜18px）	4.5 : 1
大きいテキスト（18px+）	3 : 1
UIコンポーネント（ボタン枠等）	3 : 1
AAA基準	7 : 1

チェックツール

WebAIM Contrast Checker
Chrome DevTools の色ピッカー（自動表示）

NG例

白背景 + 薄いグレー文字（#CCC）
黄色背景 + 白文字
パステル同士

alt 属性（画像の代替テキスト）

<!-- 内容ある画像 -->
<img src="/team.jpg" alt="医療スタッフが患者を診察しているシーン">

<!-- 装飾画像（情報意味なし） -->
<img src="/decoration.svg" alt="">

<!-- ロゴ -->
<img src="/logo.svg" alt="TERASU">

<!-- アイコンボタン -->
<button aria-label="メニューを開く">
  <svg><!-- ハンバーガーアイコン --></svg>
</button>

NG alt

alt="画像"（無意味）
alt="IMG_001"（ファイル名）
装飾画像なのに長い説明が入ってる

動画の字幕・音声説明

動画には字幕（Captions）を付ける
音声情報を視覚的にも提供
YouTubeの自動字幕は不正確 → 手動で修正

色だけで情報を伝えない

NG: 「赤いボタンを押してください」
OK: 「『送信』ボタン（赤）を押してください」

色覚多様性のユーザーには赤緑の区別が困難。テキスト・アイコン・パターンも併用。

2. 操作可能：使える

キーボードだけで全操作可能に

マウスなしで、Tabキーだけで全てのインタラクションができること。

チェック方法

マウスから手を離す
Tabキーで順番に要素にフォーカス
Enterで実行・Escでキャンセル

よくあるNG

カスタムボタンが <div onclick> で作られてる → Tabで飛べない
検索ボックスが Enter で送信できない
モーダルが Esc で閉じない

フォーカス表示

キーボード操作時、今どこにフォーカスがあるか視覚的に表示する。

/* デフォルトのフォーカスリングを消すのは絶対NG */
*:focus {
  outline: 2px solid var(--y);
  outline-offset: 2px;
}

/* マウスクリック時はフォーカスリング不要なら */
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: 2px;
}

タップ範囲

デバイス	最小サイズ
iOS	44 × 44 px
Android	48 × 48 px
WCAG AAA	44 × 44 px

操作時間の余裕

自動スライドショーはユーザーが止められるように
セッションタイムアウトは事前警告
アニメーションは prefers-reduced-motion で停止可能に

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

→ 動きで体調悪くなる人（前庭性障害等）に配慮。

3. 理解可能：分かる

言語属性の明示

<html lang="ja">

→ スクリーンリーダーが正しい言語で読み上げる。

一貫性のあるナビゲーション

全ページで同じ位置に同じメニュー
ナビ項目の順番を変えない
アイコンの意味を変えない

フォームのラベル

<!-- NG: ラベルなし -->
<input type="email" placeholder="メールアドレス">

<!-- OK: label と紐付け -->
<label for="email">メールアドレス</label>
<input type="email" id="email" required>

エラーメッセージは具体的に

NG: 「エラーが発生しました」
OK: 「メールアドレスの形式が正しくありません（@マークが必要）」

必須項目を明示

<label for="name">お名前 <span aria-label="必須">*</span></label>
<input type="text" id="name" required>

4. 堅牢：あらゆる環境で使える

セマンティックHTML

意味のあるタグを正しく使う：

用途	正しいタグ	NG
ボタン	`<button>`	`<div onclick>`
リンク	`<a href>`	`<span onclick>`
見出し	`<h1>` 〜 `<h6>`	`<div class="title">`
ナビ	`<nav>`	`<div class="nav">`
主要コンテンツ	`<main>`	`<div id="main">`
記事	`<article>`	`<div>`
セクション	`<section>`	`<div>`
フッター	`<footer>`	`<div class="footer">`

→ セマンティックHTMLはスクリーンリーダー・SEO・キーボード操作・全部に効く。

ARIA属性（必要に応じて）

<!-- ボタンアイコンに意味を補足 -->
<button aria-label="メニューを開く">
  <svg><!-- アイコン --></svg>
</button>

<!-- 動的に変わる領域 -->
<div role="alert" aria-live="polite">
  保存しました
</div>

<!-- 隠す（読み上げのみ・視覚的には見えない） -->
<span class="sr-only">検索結果</span>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

見出しの階層

<h1>ページタイトル（1個だけ）</h1>
  <h2>大見出し</h2>
    <h3>中見出し</h3>
      <h4>小見出し</h4>
  <h2>次の大見出し</h2>

禁止

h1 を2個以上
h2 → h4 と飛ばす（h3 を間に挟む）
装飾目的で h タグを使う（フォントサイズだけで使う）

→ スクリーンリーダーは見出しでナビゲートする。階層を守ると視覚障害ユーザーが目次代わりに使える。

リンクの書き方

NG: 「詳細は <a>こちら</a>」
OK: 「<a>サービス詳細ページ</a> をご覧ください」

→ スクリーンリーダーは「こちら」だけ読み上げても意味が分からない。リンクテキストだけで何のページか分かるように。

モバイル・タッチデバイス対応

ダブルタップでズーム可能（user-scalable=no 禁止）
横向き・縦向き両対応
タップ範囲44px以上
ジェスチャに頼らない代替操作も提供

<!-- OK: ピンチズーム可能 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- NG: ズーム禁止 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

動画・音声

必須対応

字幕：音声情報を文字化（耳が不自由なユーザー）
音声説明：視覚情報を音声化（目が不自由なユーザー）
書き起こし（トランスクリプト）：全文テキスト

自動再生は控える

自動再生する場合は音は無音で
ユーザーが停止できるボタン必須
5秒以内のループは許容範囲

色覚特性への配慮

人口の約5%は色覚特性あり（特に男性は8%）。

配慮ポイント

色だけで情報を伝えない
赤緑の組み合わせを慎重に
パターン・テクスチャ・アイコンも併用

シミュレーター

Chrome DevTools → Rendering → Emulate vision deficiencies
Color Oracle

スクリーンリーダー対応

主要スクリーンリーダー

macOS: VoiceOver（標準搭載）
iOS: VoiceOver
Windows: NVDA（無料）、JAWS（有料）
Android: TalkBack
Chrome: ChromeVox

テスト方法

VoiceOver を有効化（Mac: Cmd+F5）
Tab で順番にフォーカス移動
読み上げ内容を確認
操作できるか確認

よくある問題

画像の alt なし → 「画像」とだけ読まれる
ボタンが <div> → 「クリック可能」と認識されない
動的更新が読まれない → aria-live 必要
装飾要素が読まれる → aria-hidden="true" で隠す

チェックツール（自動診断）

ツール	用途
WAVE	ブラウザ拡張・無料
axe DevTools	Chrome拡張・無料
Lighthouse	Chrome内蔵・無料
Pa11y	CLI・自動化向け
Chrome DevTools	F12 → Lighthouse → Accessibility

→ Lighthouseアクセシビリティスコア90点以上を目指す。

アクセシビリティ対応の優先順位

完璧を目指すと終わらないので、優先順位を：

必須レベル（全プロジェクト）

<html lang="ja"> 設定
全画像に alt 属性
コントラスト比4.5:1以上
キーボード操作可能
フォームラベル明示
セマンティックHTML

推奨レベル（標準対応）

見出し階層を正しく
フォーカス表示を消さない
リンクテキストを分かりやすく
エラーメッセージ具体的に
prefers-reduced-motion 対応

高度対応（余裕があれば）

ARIA属性で補強
スクリーンリーダーで実テスト
動画字幕付与
WCAG AA 全項目準拠

アクセシビリティNG

NG	結果
`<div onclick>` で擬似ボタン	キーボード操作不可・スクリーンリーダー対応外
全画像 alt 無し	視覚障害者がコンテンツ理解できない
色のみで情報伝達	色覚特性ユーザーが理解不能
フォーカス表示を消す	キーボードユーザーが操作不能
自動再生動画 + 音	UX破綻・サイト離脱
`user-scalable=no`	視力低下ユーザーが拡大できない
「こちら」だけのリンク	スクリーンリーダーで意味不明
重要情報を画像のテキストで	スクリーンリーダー読めない

チェックリスト：アクセシビリティ最低基準

[ ] <html lang="ja"> 設定済み
[ ] 全画像に alt 属性（装飾は alt=""）
[ ] テキストのコントラスト比 4.5:1 以上
[ ] キーボードだけで全操作可能
[ ] フォーカス表示が見える
[ ] フォーム要素に <label> 紐付け
[ ] エラーメッセージが具体的
[ ] 色だけで情報を伝えてない
[ ] 動画に字幕がある（動画使う場合）
[ ] 見出し階層（h1→h2→h3）が正しい
[ ] リンクテキストが分かりやすい
[ ] Lighthouseアクセシビリティ90点以上
[ ] スクリーンリーダーで主要ページが読める

参考：アクセシビリティ模範サイト

サイト	学べる点
GOV.UK	政府サイトのアクセシビリティ最高峰
Microsoft アクセシビリティ	アクセシビリティ自体の取り組み
BBC	メディアサイトの好例
Apple アクセシビリティ	デザインと両立
総務省みんなの公共サイト運用ガイドライン	日本語の公式ガイドライン