🤔

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

2 min read

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

要件定義

  • バックエンドシステム・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 以外で「見えないだけ」にしていない
  • ユーザースタイルシートやブラウザ拡張でスタイルを変更可能
  • positionorder で要素と見た目の順番を変えていない
  • アニメーションは prefers-reduced-motion の状態で止まる

JavaScript

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

Discussion

ログインするとコメントできます