さわって学ぶアクセシビリティ

原則1 知覚可能

見る・聞くなど、どれかの感覚で情報を受け取れること。

原則2 操作可能

マウスが使えなくても、ゆっくりでも、操作できること。

原則3 理解可能

書いてあることも、画面の動きも、理解できること。

原則4 堅牢

読み上げソフトなど、いろいろな道具で正しく扱えること。

原則1 知覚可能

• 1.1.1
  非テキストコンテンツ レベルA

  画像やアイコンなど文字でないものには、同じ役割を果たす代わりのテキストを付ける（飾りだけの画像などは例外）。

  例: 検索ボタンが虫めがねの絵だけなら alt="検索" を付ける。飾りの線の画像は alt="" にする。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 1.2.1
  音声だけ及び映像だけ (収録済み) レベルA

  録音済みの音声だけの内容には書き起こしを、音のない録画映像には同じ内容を伝える文章か音声を用意する。

  例: 音のない部活の練習動画には、どんな練習をしている場面かを順に説明する文章をページに添える。

  本文（外部サイト）解説書（外部サイト）
• 1.2.2
  キャプション (収録済み) レベルA

  録画済み動画の音声には、話し声や効果音が分かるキャプション（字幕）を付ける（文章の代わりと明示した動画は除く）。

  例: 学校紹介の動画で、話している人の名前やセリフ、拍手などの音も字幕で表示する。

  本文（外部サイト）解説書（外部サイト）
• 1.2.3
  音声解説、又はメディアに対する代替 (収録済み) レベルA

  録画済み動画の映像の内容を、音声解説か、映像の内容を書き起こした文章で伝える（文章の代わりと明示した動画は除く）。

  例: 体育祭の動画の下に、どの競技で誰が何をしたかを場面の順に書いた文章を載せる。

  本文（外部サイト）解説書（外部サイト）
• 1.2.4
  キャプション (ライブ) レベルAA

  ライブ配信する動画の音声には、話し声などが分かるキャプション（字幕）をリアルタイムで付ける。

  例: 文化祭のステージをライブ配信するとき、司会や出演者の声をその場で字幕にして表示する。

  本文（外部サイト）解説書（外部サイト）
• 1.2.5
  音声解説 (収録済み) レベルAA

  録画済み動画では、話し声だけでは伝わらない大事な映像の情報を、音声解説（ナレーション）で伝える。

  例: 体育祭のまとめ動画で、得点板が映るだけの場面に「赤組が逆転」とナレーションを入れる。

  本文（外部サイト）解説書（外部サイト）
• 1.3.1
  情報及び関係性 レベルA

  見た目で表している見出し・表・リストなどの構造や関係を、HTMLのタグなどでプログラムにも伝わるようにする。

  例: お知らせの見出しは文字を太く大きくするだけでなく、h2 タグで書き、見出しだと伝わるようにする。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 1.3.2
  意味をなすシーケンス レベルA

  読む順番によって意味が変わる内容は、正しい読む順番がプログラムにも伝わるようにする。

  例: 時間割を見た目だけで並べず、読み上げソフトでも1時間目から順に読まれるようにする。

  本文（外部サイト）解説書（外部サイト）
• 1.3.3
  感覚による特性 レベルA

  操作の説明を、形・色・大きさ・位置・音など、見え方や聞こえ方の特徴だけに頼って書かない。

  例: アプリの使い方で「右の丸いボタンを押す」ではなく「右の［送信］ボタンを押す」と名前も書く。

  本文（外部サイト）解説書（外部サイト）
• 1.3.4
  向き (orientation) レベルAA

  画面の表示や操作を、縦向きか横向きのどちらかに固定しない（その向きが欠かせない場合は除く）。

  例: 文化祭のパンフレットのページを、スマートフォンを縦にしても横にしても読めるようにしておく。

  本文（外部サイト）解説書（外部サイト）
• 1.3.5
  入力目的の特定 レベルAA

  名前やメールなど利用者自身の情報を入れる欄は、何を入れる欄かを autocomplete 属性などでプログラムに伝える。

  例: 入部フォームのメール欄に autocomplete="email" を付け、ブラウザの自動入力を使えるようにする。

  本文（外部サイト）解説書（外部サイト）
• 1.4.1
  色の用途 レベルA

  色だけで情報や操作の違いを伝えない。文字や形など、色以外の手がかりもいっしょに示す。

  例: 学校サイトの時間割で、休講の授業を赤字にするだけでなく、「休講」という文字も表示する。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 1.4.2
  音声の制御 レベルA

  自動で流れて3秒より長く続く音声には、止める仕組みか、音量を個別に調整する仕組みを用意する。

  例: 文化祭サイトを開くと自動でBGMが鳴るなら、ページの先頭近くに見つけやすい停止ボタンを置く。

  本文（外部サイト）解説書（外部サイト）
• 1.4.3
  コントラスト (最低限) レベルAA

  文字と背景のコントラスト比を4.5:1以上にする（大きな文字は3:1以上でよく、ロゴなどは例外）。

  例: お知らせサイトで、白い背景に薄い灰色の文字で締め切りを書かず、黒に近い濃い色で書く。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 1.4.4
  テキストのサイズ変更 レベルAA

  支援技術を使わなくても、文字を200％まで拡大して内容や機能が失われないようにする（字幕と文字画像は除く）。

  例: ブラウザで文字を200％に拡大しても、お知らせの文字が重なったり切れたりしないようにする。

  本文（外部サイト）解説書（外部サイト）
• 1.4.5
  文字画像 レベルAA

  テキストで表現できるなら、文字の画像ではなくテキストで情報を伝える（ロゴなど欠かせない場合などは除く）。

  例: 文化祭の日程を、文字を画像にしたポスターだけで載せず、読み上げや拡大ができるテキストでも書く。

  本文（外部サイト）解説書（外部サイト）
• 1.4.10
  リフロー レベルAA

  縦にスクロールするページは、幅320 CSS pxの表示でも横スクロールなしで読めて使えるようにする（表や地図などは除く）。

  例: スマートフォンで拡大表示しても、部活紹介の文章が横にはみ出さず折り返して読めるようにする。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 1.4.11
  非テキストのコントラスト レベルAA

  ボタンや入力欄の境界、状態の表示、意味のある図形は、隣り合う色とのコントラスト比を3:1以上にする。

  例: アンケートの入力欄の枠が白い背景の上で薄すぎて見えないなら、濃い色の枠線にする。

  本文（外部サイト）解説書（外部サイト）
• 1.4.12
  テキストの間隔 レベルAA

  利用者が行間・段落の間・文字の間隔・単語の間隔を決められた幅まで広げても、内容や機能が欠けないようにする。

  例: 行間を文字サイズの1.5倍に広げても、部活紹介の文字が枠からはみ出して隠れないようにする。

  本文（外部サイト）解説書（外部サイト）
• 1.4.13
  ホバー時又はフォーカス時のコンテンツ レベルAA

  マウスを乗せる・フォーカスすると出る追加表示は、閉じられる、その上にマウスを動かせる、勝手に消えない、を満たす。

  例: 用語にマウスを乗せると出る説明は、Escキーで閉じられ、説明の上にマウスを移しても消えないようにする。

  本文（外部サイト）解説書（外部サイト）

原則2 操作可能

• 2.1.1
  キーボード レベルA

  すべての機能をキーボードだけで操作できるようにする（手書きのように動きの軌跡が必要な機能は除く）。

  例: 文化祭の人気投票ページを、マウスを使わずTabキーで選んでEnterキーで投票できるようにする。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 2.1.2
  キーボードトラップなし レベルA

  キーボードで入った部品から、キーボードだけで抜け出せるようにする。標準と違う方法なら、その方法を伝える。

  例: 埋め込んだ動画プレーヤーにTabキーで入ったら、Tabキーでまた外に出られるようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.1.4
  文字キーによるショートカット レベルA

  文字キー1つだけのショートカットを作るなら、オフにできる、キーを変えられる、フォーカス中だけ効く、のどれかにする。

  例: Sキーだけで送信するチャット機能なら、設定でそのショートカットをオフにできるようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.2.1
  期限調節可能 レベルA

  時間制限を設けるなら、解除、10倍以上の調整、事前警告して延長、のどれかをできるようにする（20時間より長い場合などは例外）。

  例: 部活の申込フォームが10分で切れるなら、切れる前に知らせ、簡単な操作で延長できるようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.2.2
  一時停止・停止・非表示 レベルA

  自動で始まり5秒より長く続く動きやスクロール、自動更新する情報は、一時停止・停止・非表示ができるようにする（例外あり）。

  例: 学校サイトのトップで自動で切り替わるお知らせのスライドに、一時停止ボタンを付ける。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 2.3.1
  3 回の閃光、又は閾値以下 レベルA

  どの1秒間でも3回を超えて光る閃光を入れない（閃光が一般閃光閾値と赤色閃光閾値を下回る場合は除く）。

  例: 文化祭の告知動画で、画面全体が白と黒に1秒に何度も激しく点滅する演出を使わない。

  本文（外部サイト）解説書（外部サイト）
• 2.4.1
  ブロックのバイパス レベルA

  複数のページで繰り返すメニューなどのまとまりを飛ばして、本文に直接行ける仕組みを用意する。

  例: 各ページの先頭に「本文へスキップ」リンクを置き、毎回メニューを読み上げずに済むようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.4.2
  ページタイトル レベルA

  各ページに、そのページの主題や目的が分かるタイトル（title要素）を付ける。

  例: ページのタイトルを「無題」ではなく「文化祭2026 模擬店一覧」のように中身が分かるものにする。

  本文（外部サイト）解説書（外部サイト）
• 2.4.3
  フォーカス順序 レベルA

  Tabキーでの移動順が意味や操作に関わるときは、意味と操作が保たれる順番でフォーカスが移るようにする。

  例: 申込フォームでTabキーを押すと、名前、学年、クラスと画面の並びどおりに入力欄を移るようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.4.4
  リンクの目的 (文脈内) レベルA

  リンクの目的が、リンクの文字だけか、リンクの文字とその周りの文脈から分かるようにする（例外あり）。

  例: 「こちら」だけのリンクにせず、「文化祭のしおり（PDF）」のように行き先が分かる文字にする。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 2.4.5
  複数の経路 レベルAA

  サイト内のページにたどり着く方法を、メニュー・検索・サイトマップなどで複数用意する（手続きの途中のページは除く）。

  例: 学校サイトで、メニューからも、サイト内検索からも、各部活のページを探せるようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.4.6
  見出し及びラベル レベルAA

  見出しや入力欄のラベルは、その部分の内容や目的が分かる言葉にする。

  例: 提出フォームの入力欄のラベルを「入力1」ではなく「出席番号」のように中身が分かる言葉にする。

  本文（外部サイト）解説書（外部サイト）
• 2.4.7
  フォーカスの可視化 レベルAA

  キーボードで操作できる部品には、今どこにフォーカスがあるかが目に見える表示のしかたを用意する。

  例: Tabキーで移動したとき、選ばれているボタンに枠線が出るようにし、CSSでその枠線を消さない。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 2.4.11
  隠されないフォーカス (最低限) レベルAA 2.2で追加

  キーボードでフォーカスを受けた部品が、固定ヘッダなど制作者が置いたものに全部隠されないようにする。

  例: 画面下に固定したお知らせバーの裏に、フォーカス中のリンクがすっぽり隠れないようにする。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 2.5.1
  ポインタジェスチャ レベルA

  2本指の操作や、なぞる軌跡で動かす機能は、1本の指やクリックの操作でも使えるようにする（欠かせない場合は除く）。

  例: 地図をピンチで拡大するだけでなく、「＋」「－」ボタンでも拡大・縮小できるようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.5.2
  ポインタキャンセル レベルA

  指やマウスで押した瞬間に機能を実行せず、離したときに実行して途中でやめられるようにするなど、誤操作を防ぐ（例外あり）。

  例: 削除ボタンにうっかり指を置いても、ボタンの外で指を離せば削除されないようにする。

  本文（外部サイト）解説書（外部サイト）
• 2.5.3
  ラベルを含む名前 (name) レベルA

  ボタンなどに見えている文字を、プログラム上の名前（アクセシブルな名前）にも含める。

  例: ［送信する］と表示したボタンに、aria-label="確定" のような見た目と違う名前を付けない。

  本文（外部サイト）解説書（外部サイト）
• 2.5.4
  動きによる起動 レベルA

  スマートフォンを振る・傾けるなどの動きで使う機能は、ボタンなどでも操作でき、動きへの反応をオフにもできるようにする（例外あり）。

  例: 振ると入力を取り消すアプリなら、「元に戻す」ボタンも置き、振る操作をオフにする設定も付ける。

  本文（外部サイト）解説書（外部サイト）
• 2.5.7
  ドラッグ動作 レベルAA 2.2で追加

  ドラッグで操作する機能は、ドラッグなしのタップやクリックだけでも同じことができるようにする（欠かせない場合などは除く）。

  例: 座席表で名前をドラッグして並べ替えるなら、名前をタップしてから移動先をタップする方法も用意する。

  本文（外部サイト）解説書（外部サイト）
• 2.5.8
  ターゲットのサイズ (最低限) レベルAA 2.2で追加

  タップやクリックする対象は24×24 CSS px以上にする（周りに十分な間隔がある場合や文中のリンクなどは除く）。

  例: 部活SNSの小さな「いいね」「共有」ボタンを、それぞれ24×24 CSS px以上の大きさにする。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）

原則3 理解可能

• 3.1.1
  ページの言語 レベルA

  それぞれのページの主な言語を、html要素の lang 属性などでプログラムに伝える。

  例: 日本語の学校サイトでは <html lang="ja"> と書き、読み上げソフトが日本語として読むようにする。

  本文（外部サイト）解説書（外部サイト）
• 3.1.2
  一部分の言語 レベルAA

  ページ内に別の言語の文や語句があれば、その言語をプログラムに伝える（固有名詞や専門用語などは除く）。

  例: 英語スピーチ大会のページで、英文で書いた段落に lang="en" を付け、英語の発音で読まれるようにする。

  本文（外部サイト）解説書（外部サイト）
• 3.2.1
  フォーカス時 レベルA

  部品にフォーカスが移っただけで、ページの移動や新しいウィンドウを開くなどの大きな変化を起こさない。

  例: アンケートで、Tabキーで次の入力欄に移っただけでフォームが勝手に送信されないようにする。

  本文（外部サイト）解説書（外部サイト）
• 3.2.2
  入力時 レベルA

  選択肢を選ぶなど設定を変えただけで、ページ移動などの大きな変化を自動で起こさない（事前に知らせた場合は除く）。

  例: 学年を選ぶプルダウンを変えただけでページが切り替わらないよう、［表示］ボタンを別に置く。

  本文（外部サイト）解説書（外部サイト）
• 3.2.3
  一貫したナビゲーション レベルAA

  複数のページで繰り返すメニューなどは、毎回同じ相対的な順番で並べる（利用者が並べ替えた場合は除く）。

  例: 学校サイトのどのページでも、メニューを「お知らせ・行事・部活・アクセス」の同じ順に並べる。

  本文（外部サイト）解説書（外部サイト）
• 3.2.4
  一貫した識別性 レベルAA

  サイトの中で同じ働きをする部品には、どのページでも一貫した名前やラベルを付ける。

  例: あるページでは「検索」、別のページでは「探す」と、同じ機能のボタンの名前を変えない。

  本文（外部サイト）解説書（外部サイト）
• 3.2.6
  一貫したヘルプ レベルA 2.2で追加

  問い合わせ先やよくある質問などのヘルプを複数ページに置くなら、ほかの内容に対して同じ順番の位置に置く。

  例: 学校サイトの「お問い合わせ」リンクを、どのページでもフッタの中の同じ順番の位置に置く。

  本文（外部サイト）解説書（外部サイト）
• 3.3.1
  エラーの特定 レベルA

  入力の誤りを自動で見つけたら、どの項目が誤りかを示し、その内容を文字で説明する。

  例: メール欄に＠がないとき、欄を赤くするだけでなく「メールアドレスに＠がありません」と表示する。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 3.3.2
  ラベル又は指示 レベルA

  利用者に入力を求めるところには、何をどう入力するかが分かるラベルや説明を付ける。

  例: 生年月日の欄に「生年月日（例：2009/04/01）」のように、項目名と書き方を示す。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 3.3.3
  エラーの修正提案 レベルAA

  入力の誤りを自動で見つけ、直し方も分かっているときは、それを伝える（安全や目的を損なう場合は除く）。

  例: 申込フォームの日付の欄に「4月31日」と入れたら、「4月は30日までです」と直し方を示す。

  本文（外部サイト）解説書（外部サイト）
• 3.3.4
  誤り防止 (法的・金融・データ) レベルAA

  契約・支払い・データの変更や削除・テストの解答送信では、取り消し、誤りのチェック、送信前の確認のどれかを用意する。

  例: オンラインの小テストで、解答を送信する前に答えの一覧を見直して直せる確認画面を出す。

  本文（外部サイト）解説書（外部サイト）
• 3.3.7
  冗長な入力項目 レベルA 2.2で追加

  同じ手続きの中で前に入力した情報をもう一度求めるなら、自動で入れるか選べるようにする（例外あり）。

  例: 修学旅行の申込で、保護者の住所に「生徒と同じ」を選べるチェックボックスを付ける。

  本文（外部サイト）解説書（外部サイト）
• 3.3.8
  アクセシブルな認証 (最低限) レベルAA 2.2で追加

  ログインでパスワードの記憶やパズルを求めるなら、貼り付けや自動入力を使える、別の方法を選べる、などの支援を用意する（例外あり）。

  例: 課題提出サイトのパスワード欄で貼り付けを禁止せず、パスワード管理ツールの自動入力を使えるようにする。

  本文（外部サイト）解説書（外部サイト）

原則4 堅牢

• 4.1.2
  名前 (name)・役割 (role)・値 (value) レベルA

  自作の部品も含め、すべての部品の名前・役割・状態を、支援技術がプログラムで読み取れるようにする。

  例: 開閉メニューのボタンは div でなく button 要素で作り、開いているかどうかを aria-expanded で伝える。

  さわって学ぶ本文（外部サイト）解説書（外部サイト）
• 4.1.3
  ステータスメッセージ レベルAA

  「送信しました」などの状況の知らせは、フォーカスを移さなくても支援技術が利用者に伝えられるようにする。

  例: 検索後の「5件見つかりました」の表示に role="status" を付け、読み上げソフトにも伝わるようにする。

  本文（外部サイト）解説書（外部サイト）