アクセシブルなサイトリニューアルのチェック項目

検討したり、例外を適切に設けるために使うものです。

要件定義

• バックエンドシステム・CMSが以下に対応している
  • 入力フォームに時間制限はない
  • 入力フォームの入力チェック機能は適切なエラーメッセージがでる
  • 出力されるHTMLが仕様に準拠したHTML
  • 画像に代替テキスト(alt属性)が入れられる
  • 動画にクローズドキャプションを追加できる
  • 自動的に生成されるウィジェットがアクセシブルになっている
    • 画像のポップアップ（モーダル）機能など
• 3rdパーティのウィジェットやASPがアクセシブルである
  • 動画埋め込み
  • 地図埋め込み
  • サイト内検索
  • 自動翻訳機能
  • チャットボット

情報設計

• 情報設計に問題がない・情報を管理できている
  • ナビゲーション設計が適切でどのページにもたどり着ける
  • リンクテキストとリンク先ページタイトル・見出しに乖離がない
  • ページタイトルとh1見出しに乖離がない
  • サイト内でページタイトルに重複がない
  • サイト内でディスクリプションに重複がない
• 情報の強度が適切
  • 情報の順序が崩壊していない
  • 見出しと見出しレベルが適切
  • 重要な情報・ページの主要な情報をモーダルやディスクロージャ（アコーディオン）、タブで隠していない。ページ内検索でヒットする。
  • メディアクエリのブレークポイントによって情報の差が発生しない
• 画像が適切な代替テキストを持っている
• 動画が適切なクローズドキャプションを持っている
• ランダムに出力しない
• アクセシブルでないウィジェットやページに対して代替要素・代替ページを用意している
• リンク要素にマウスオーバー（ホバー）の機能をつけない（タッチスクリーンで使えないため）

ビジュアルデザイン

• 情報の内容を色以外で認知できる
• カラーコントラストが適切
  • 文字と背景
  • 要素の境界と背景
• 非活性（ disabled ）な要素が非活性と認知できる
• 本文が読みやすい
• アイコンやボタンなどに、見た目と機能の一貫性がある
• アイコンがハイコンテキストでない
• 大きい指でもタップできるようにヒット領域が確保できている
• ホバー状態のビジュアルが適切
• フォーカスインジケータのビジュアルが適切
• アニメーションや模様でてんかん発作を起こさない
• アニメーションは止められる

HTML

• HTML Living Stadardに準拠している
• WAI-ARIA・ARIA in HTMLに準拠している
• HTML要素のlang属性が適切
• 『アクセシブルな名前』が適切
• コンテンツを持つ要素はランドマークに所属している
• h1要素が必ずあり、数が適切（ほとんど場合ひとつ）
• 項目の数を把握したい要素はリストになっている
• メディアクエリのブレークポイントによって画像を分ける場合はpicture要素を使っている
• レイアウトのためのtable要素を使っていない
• テーブルでセルの結合をしていない
• リンクはa要素、ボタンはbutton要素（URLが変更されたり、新しいタブで開くものはリンク）
• アンカーリンク目的以外で # を使っていない
• 見出しと本文はブラウザのリーダーモードで適切に抽出される

CSS

• フォーカスインジケータを消していない
• 読み上げが必要な要素を display: none で消していない
• 知覚不要の要素を display: none 以外で「見えないだけ」にしていない
• ユーザースタイルシートやブラウザ拡張でスタイルを変更可能
• position や order で要素と見た目の順番を変えていない
• アニメーションは prefers-reduced-motion の状態で止まる

JavaScript

• 要素の状態を変更した時は適切にARIAステートやinertも変更している
  • ディスクロージャ（アコーディオン）
  • モーダルダイアログ（ハンバーガーメニュー・ドロワーメニュー）
  • タブ
  • カルーセル（スライドショー）
• スムーズスクロールを実装している場合、振る舞いがアンカーリンクのそれを満たしている
  • URLにハッシュがつく
  • フォーカスが移動している
• パーマリンクを変更したら適切にタイトルを変更している
• History APIの管理が適切
• DOMに干渉する自動的に繰り返す処理はユーザーが任意に止められる