ウェブアクセシビリティ簡易チェックリスト

ウェブアクセシビリティを確保、向上させるためのコンテンツの簡易チェックリストです。このリストに記載されている項目を満たすことで、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質はクリア可能です。

チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。

わからないことがあれば #accessibility_and_human_rights_aka人権 チャンネルにていつでもお気軽にご相談ください!

目次

  1. 代替テキスト
  2. 動画・音声
  3. マークアップ
  4. 見やすさ、聞きやすさ、区別しやすさ
  5. 操作しやすさ
  6. ナビゲーション
  7. フォーム

代替テキスト

  • 画像に代替テキストが付与されている
  • 装飾目的の画像が無視できるようになっている
    • 代替テキストが空で設定されている
    • または背景画像として表示されている

参考

動画・音声

  • 動画の音声に字幕が付与されている
  • 動画の内容を解説した音声、またはコンテンツがあるか
  • 音声や動画が自動で再生される場合、一時停止できるか
  • 画面内に1秒に3回以上の点滅や閃光を起こすものがない

参考

マークアップ

  • 表が<table>でマークアップされている
  • 見出しが <h1> ~ <h6>でマークアップされている
    • 見出しレベルが順になっている
  • リストが <ul><ol><dl>でマークアップされている
  • 見た目の順番とHTMLの順番があっている
  • 空白文字を用いてレイアウトをしていない
  • 同じ id を持つ要素がページ内に複数存在しない

参考

見やすさ、聞きやすさ、区別しやすさ

  • 画面を200%拡大、または文字サイズを2倍に変更しても情報が取得できる
  • 背景色と文字色のコントラスト比が 4.5:1 (大きな文字:18px以上は 3:1)以上ある
  • 色や、形、音、レイアウト情報のみでコンテンツを説明していない

参考

操作しやすさ

  • キーボードで操作可能
    • キーボードで選択可能(タブ移動できること)
    • キーボードで実行可能(Enter や Space などで実行できること)
    • キーボードで操作していることがわかる(フォーカス状態が見えること)
  • キーボード操作の順序が見た目の順序とあっている
  • コンテンツに制限時間がかけられていない(必須の場合は除く)

参考

ナビゲーション

  • ページの言語が <html> に記載されている
  • ページのタイトルがページの内容を表している
  • リンクのテキストからリンク先が判別できる

参考

フォーム

  • 入力する内容や、操作がラベルとして表示されている
  • 入力エラーを出す場合、エラーの内容が特定できる
  • 入力欄や選択肢を選択、または入力した時に大きな変化を起こさない

参考

© 2021, SmartHR, Inc.