SmartHR Design System

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

ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。

1. 代替テキスト

  1. 画像に代替テキストが付与されている
  2. 装飾目的の画像が無視できるようになっている

参考

2. 動画・音声・アニメーション

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

参考

3. マークアップ

  1. 表が<table>でマークアップされている
  2. 見出しが <h1> ~ <h6>でマークアップされている
  3. リストが <ul>、<ol>、<dl>でマークアップされている
  4. 空白文字を用いてレイアウトをしていない
  5. 同じ id を持つ要素がページ内に複数存在しない

参考

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

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

参考

5. 操作しやすさ

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

参考

6. ナビゲーション

  1. ページの言語が <html> に記載されている
  2. ページのタイトルがページの内容を表している
  3. ページの主要コンテンツに見出しが付与されている
  4. リンクのテキストからリンク先が判別できる

参考

7. フォーム

  1. 入力する内容や、操作がラベルとして表示されている
  2. フォームパーツにアクセシブルネームがある
  3. エラーの発生とエラーの内容が特定できる
  4. 入力欄や選択肢を選択、または入力したときに大きな変化を起こさない

参考