ウェブアクセシビリティ簡易チェックリスト
ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。
代替テキスト
参考
- 画像の代替テキスト - SmartHR Design System
- 非テキストコンテンツ - WCAG 2.0 解説書
- 1.1.1 画像に代替テキストを提供する - Ameba Accessibility Guidelines
動画・音声
- 動画の音声に字幕が付与されている
- 動画の内容を解説した音声、またはコンテンツがあるか
- 音声や動画が自動で再生される場合、一時停止できるか
- 画面内に1秒に3回以上の点滅や閃光を起こすものがない
参考
- 音声解説、又はメディアに対する代替 (収録済) - WCAG 2.0解説書
- 1.2.1 収録済みの動画に代替コンテンツを提供する - Ameba Accessibility Guidelines
- 1.4.2 音声を制御できるようにする - Ameba Accessibility Guidelines
- 2.2.2 動く、自動更新するコンテンツに配慮する - Ameba Accessibility Guidelines
- 3 回の閃光、又は閾値以下 - WCAG 2.0解説書
マークアップ
- 表が
<table>でマークアップされている - 見出しが
<h1>~<h6>でマークアップされている - リストが
<ul>、<ol>、<dl>でマークアップされている - 空白文字を用いてレイアウトをしていない
- 同じ
idを持つ要素がページ内に複数存在しない
参考
- 1.3.1 情報や関係性を明確にする - Ameba Accessibility Guidelines
- 1.3.2 意味のある順序でコンテンツを表現する - Ameba Accessibility Guidelines
見やすさ、聞きやすさ、区別しやすさ
- 画面を200%拡大、または文字サイズを2倍に変更しても情報が取得できる
- 背景色と文字色のコントラスト比が
4.5:1（大きな文字:18px以上は3:1）以上ある - 色や、形、音、レイアウト情報のみでコンテンツを説明していない
参考
- 1.4.4 テキストサイズを拡大縮小できる - Ameba Accessibility Guidelines
- テキストのサイズ変更 | WCAG 2.0解説書
- 1.3.3 感覚的な特徴だけで説明しない - Ameba Accessibility Guidelines
操作しやすさ
- キーボードで操作可能
- キーボードで選択可能（タブ移動できること）
- キーボードで実行可能（Enter や Space などで実行できること）
- キーボードで操作していることがわかる（フォーカス状態が見えること）
- キーボード操作の順序が見た目の順序とあっている
- コンテンツに制限時間がかけられていない（必須の場合は除く）
参考
- 2.1.2 キーボード操作を可能にする - Ameba Accessibility Guidelines
- 2.4.7 フォーカスを見えるようにする - Ameba Accessibility Guidelines
- 2.4.3 適切なフォーカス順序にする - Ameba Accessibility Guidelines
- 2.2.1 コンテンツに制限時間を設けない - Ameba Accessibility Guidelines
ナビゲーション
参考
- 3.1.1 ページの言語を指定する - Ameba Accessibility Guidelines
- 2.4.2 ページの主題がわかるタイトルを設定する - Ameba Accessibility Guidelines
- 2.4.4 リンクの目的を理解できるようにする - Ameba Accessibility Guidelines
フォーム
参考