ウェブアクセシビリティ簡易チェックリスト
ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。
1. 代替テキスト
アイコンやグラフなどの画像には、代替コンテンツを使用して機械・支援技術にも同等の情報を提供します。
| チェック内容 | カテゴリ |
|---|---|
| 1. 画像に代替テキストが付与されている | UIデザイン実装 |
| 2. 装飾目的の画像が無視できるようになっている | 実装 |
2. 動画・音声・アニメーション
動画や音声コンテンツを提供する際は、音声や映像が利用できない状況でも同等の情報を取得できるようにします。 また、UIを装飾するアニメーションなどの動きがユーザーの閲覧を妨げないようにします。
| チェック内容 | カテゴリ |
|---|---|
| 1. 動画の音声に字幕が付与されている | UIデザイン実装 |
| 2. 動画の内容を解説した音声、またはコンテンツがあるか | UIデザイン |
| 3. 音声や動画、アニメーションが自動で再生される場合、一時停止できるか | UIデザイン実装 |
| 4. 画面内に1秒に3回以上の点滅や閃光を起こすものがない | UIデザイン |
3. マークアップ
HTMLの構造を適切にマークアップし、インターネットブラウザやスクリーンリーダーなどの支援技術が正しくコンテンツを解釈できるようにします。
| チェック内容 | カテゴリ |
|---|---|
1. 表が<table>でマークアップされている | 実装 |
2. 見出しが <h1> ~ <h6>でマークアップされている | 実装 |
3. リストが <ul>、<ol>、<dl>でマークアップされている | 実装 |
| 4. 空白文字を用いてレイアウトをしていない | 実装 |
5. 同じ id を持つ要素がページ内に複数存在しない | 実装 |
4. 見やすさ、聞きやすさ、区別しやすさ
ユーザーのさまざまな利用環境を想定し、情報を認識しやすいようにデザインします。
| チェック内容 | カテゴリ |
|---|---|
| 1. 画面を200%拡大、または文字サイズを2倍に変更しても情報が取得できる | UIデザイン実装 |
2. 背景色と文字色のコントラスト比が 4.5:1 (大きな文字:29px以上は 3:1)以上ある | UIデザイン |
| 3. 色や、形、音、レイアウト情報のみでコンテンツを説明していない | UIデザイン |
5. 操作しやすさ
キーボードや外部スイッチなど、マウスやタッチ操作以外の入力手段でもすべての機能を操作できるようにします。
| チェック内容 | カテゴリ |
|---|---|
| 1. キーボードで操作可能 | UIデザイン実装 |
| 2. キーボード操作の順序が見た目の順序とあっている | 実装 |
| 3. コンテンツに制限時間がかけられていない(必須の場合は除く) | UIデザイン実装 |
6. ナビゲーション
ページ内の情報構造を明確にし、ユーザーが目的のコンテンツを見つけやすくする必要があります。
| チェック内容 | カテゴリ |
|---|---|
1. ページの言語が <html> に記載されている | 実装 |
| 2. ページのタイトルがページの内容を表している | UIデザイン実装 |
| 3. ページの主要コンテンツに見出しが付与されている | UIデザイン実装 |
| 4. リンクのテキストからリンク先が判別できる | UIデザイン |
7. フォーム
フォームの入力項目や操作方法を明確にし、ユーザーが迷わず正確に入力できるようにします。
| チェック内容 | カテゴリ |
|---|---|
| 1. 入力する内容や、操作がラベルとして表示されている | UIデザイン実装 |
| 2. フォームパーツにアクセシブルネームがある | 実装 |
| 3. エラーの発生とエラーの内容が特定できる | UIデザイン実装 |
| 4. 入力欄や選択肢を選択、または入力したときに大きな変化を起こさない | UIデザイン実装 |