アクセシビリティガイドラインWCAG2.2について(第2 / 3回)【成功基準の具体例・役割編】

NakataKouki

2週間前

前回の続きです。

第3回実践編

各成功基準の具体例
デザイン以前、デザイン時、コーディング時における役割

各成功基準の具体例

※一例であり、全てを網羅したものではありません。

知覚可能 (Perceivable)

レベルA:
- 1.1.1 非テキストコンテンツ: すべての非テキストコンテンツには、同等の目的を果たす代替テキストが提供されていること。
```
Bad Example:
<img src="image.jpg">
```
```
Good Example:
<img src="image.jpg" alt="説明的なテキスト">
```
- 1.2.1 オーディオオンリーおよびビデオオンリー(収録済み): 音声だけまたはビデオだけの収録済みコンテンツには、代替のテキストが提供されていること

レベルAA:

1.4.3 コントラスト (最小): テキストのコントラスト比が少なくとも4.5:1であること。

Bad Example:
<style>
    .low-contrast {
        color: #777;
        background-color: #eee;
    }
</style>
<p class="low-contrast">このテキストはコントラストが低く、読みにくいです。</p>

Good Example:
<style>
    .high-contrast {
        color: #000;
        background-color: #fff;
    }
</style>
<p class="high-contrast">このテキストはコントラストが高く、読みやすいです。</p>

1.4.4 テキストのリサイズ: テキストが最大200%までリサイズ可能であり、コンテンツの表示崩れや機能が損なわれないこと。

レベルAAA:
- 1.4.6 コントラスト (強化): テキストのコントラスト比が少なくとも7:1であること。
- 1.4.8 視覚的なプレゼンテーション: テキストの行間や文字間、段落間のスペースが十分に確保されていること。
- 1.4.11 ターゲットの最小サイズ: クリック可能な要素のターゲットサイズを少なくとも24×24ピクセルにする必要がある。

操作可能 (Operable)

レベルA:
- 2.1.1 キーボード: すべての機能がキーボードインターフェースを通じて操作可能であること。
```
Bad Example:
<button onclick="alert('クリックしました！')">クリック</button>
```
```
Good Example:
<button onclick="alert('クリックしました！')" tabindex="0">クリック</button>
```
- 2.2.1 タイミング調整: 時間制限が設けられている場合、ユーザーが調整できること。
- 2.5.7 ドラッグジェスチャーの代替: ドラッグ操作に代わるクリックやタップなどの単純な操作が提供されていること。
レベルAA:
- 2.4.7 フォーカスの可視化: キーボードフォーカスが移動するときに、フォーカスが可視化されていること。
```
Bad Example:
<style>
    button:focus {
        outline: none;
    }
</style>
<button>クリック</button>
```
```
Good Example:
<style>
    button:focus {
        outline: 2px solid blue;
    }
</style>
<button>クリック</button>
```
- 2.4.6 見出しとラベル: 見出しやラベルが分かりやすく、内容や目的を明確に伝えること。
- 2.5.8 ターゲットサイズ: クリック可能なターゲットのサイズが24×24ピクセル以上であること。
レベルAAA:
- 2.1.3 キーボード (例外なし): すべての機能がキーボードで操作可能であり、例外がないこと。
- 2.2.3 無制限の調整可能な時間: すべてのタイミング調整がユーザーに完全に制御されていること。

理解可能 (Understandable)

レベルA:

3.1.1 ページの言語: 各ウェブページのデフォルトの自然言語がプログラムで決定できること。例えば、google翻訳が日本語のページとして認識できるよう、htmlにlangを指定する。

Bad Example:
<html>
<head>
    <title>Example</title>
</head>
<body>
    <p>これは日本語のテキストです。</p>
</body>
</html>

Good Example:

<html lang="ja">
<head>
    <title>Example</title>
</head>
<body>
    <p>これは日本語のテキストです。</p>
</body>
</html>

3.2.1 フォーカス時: フォーカスしただけでページを移動させたり、別の要素にフォーカスを移動させたりしない。

Bad Example:
<select onchange="document.location.href=this.value">
    <option value="home.html">Home</option>
    <option value="about.html">About</option>
</select>

Good Example:

<select>
    <option value="home.html">Home</option>
    <option value="about.html">About</option>
</select>
<button onclick="document.location.href=document.querySelector('select').value">選択したページに移動</button>

認証の代替: 記憶を必要としない認証手段（例: メールリンク、生体認証）を提供すること。

レベルAA:
- 3.1.2 部分の言語: ページ内のテキストの言語が部分的に異なる場合、その言語がプログラムで決定できること。
- 3.2.4 一貫した識別方法: 同じ機能を持つコンポーネントは一貫して識別されること。
レベルAAA:
- 3.1.3 専門用語: 専門用語や慣用句が説明されていること。
- 3.2.5 インプット時: 入力フィールドの内容が変更されることで、予期しない変更が発生しないこと。

堅牢 (Robust)

レベルA:
- 4.1.1 パーサブル: コンテンツは、ウェルフォームドであり、文法に従っていること。
```
Bad Example:
<div>
    <span>不完全なタグ</div>
```
```
Good Example:
<div>
    <span>完全なタグ</span>
</div>
```
- 4.1.2 名前、役割、値: インターフェースの要素は、名前、役割、状態、プロパティ、値がプログラムで決定でき、必要に応じて設定できること。
```
Bad Example:
<div onclick="submitForm()">Submit</div>
```
```
Good Example:

<button onclick="submitForm()">Submit</button>
```

デザイン以前、デザイン時、コーディング時における役割

デザイン以前の役割

プロジェクトマネージャー
- アクセシビリティ方針の策定とチーム全体への共有
- プロジェクト計画にアクセシビリティチェックポイントを組み込む
- ユーザーリサーチとペルソナ作成の主導
- 適切なツールと技術の選定
- チームメンバーの教育とトレーニングの実施
ユーザーエクスペリエンス (UX) リサーチャー
- ユーザーリサーチの実施
- 障害を持つユーザーを含む多様なユーザー層のニーズを調査
- ユーザビリティテストの計画と実施
アクセシビリティエキスパート
- WCAG 2.1の基準に基づく内部ガイドラインやチェックリストの作成
- チームへのアクセシビリティに関するコンサルティング
- アクセシビリティツールの導入と使用方法の指導

デザイン時の役割

デザイナー
- カラーとコントラスト比を考慮したデザイン
- レイアウトの一貫性とレスポンシブデザインの採用
- 読みやすいフォントサイズと行間、文字間の設定
- メディアに対する代替テキストや字幕の提供
- インタラクティブ要素のサイズやフォーカス可視化の設計
UI/UX デザイナー
- ナビゲーションの一貫性と分かりやすさの設計
- フォームのデザインとユーザーフレンドリーなラベル付け
- エラーメッセージの視覚的な明示
- スキップリンクや見出し構造の設計
アクセシビリティエキスパート
- デザインレビューを通じたアクセシビリティの確認
- デザインにおけるアクセシビリティ改善点のフィードバック提供

コーディング時の役割

フロントエンド開発者
- セマンティックHTMLの使用と正しいタグの適用
- 必要に応じたARIA属性の適用
- キーボード操作が可能なインターフェースの実装
- フォーカス状態を視覚的に明確にするスタイルの追加
- 画像の代替テキストの設定とビデオの字幕、音声コンテンツのトランスクリプトの提供
JavaScript開発者
- 動的に生成されるコンテンツやインタラクションのアクセシビリティ確保
- キーボードイベントハンドラの実装とテスト
- フォームフィールドの適切なラベル付けとエラーメッセージの表示
バックエンド開発者
- データの検証とサーバー側でのエラーメッセージの適切な処理
- アクセシビリティに関するサーバーサイドロジックの実装
アクセシビリティテスター
- コードのアクセシビリティテストの実施
- 各フェーズでのアクセシビリティチェックポイントの確認
- アクセシビリティツールを使用した評価とフィードバックの提供

まとめ

デザイン以前: アクセシビリティ方針の策定、ユーザーリサーチ、ペルソナ作成、ツール選定、教育・トレーニングの実施。
デザイン時: 高コントラスト比の確保、一貫性のあるレスポンシブデザイン、読みやすいタイポグラフィ、代替テキストや字幕の提供、フォーカス可視化の設計。
コーディング時: セマンティックHTMLの使用、ARIA属性の適用、キーボード操作の確保、フォーカス状態の明確化、メディアのアクセシビリティ確保、動的コンテンツのアクセシビリティ対応。

これらの役割を適切に分担し、各段階でアクセシビリティに対する注意を払うことで、WCAG 2.1に準拠したウェブサイトを実現できます。

第1回概要編

第3回実践編