WCAG 2.2 ガイドライン「1.3.3 感覚的な特徴」Level A について

はじめに

WCAG 2.2の「1.3.3 感覚的な特徴」は、コンテンツの理解や操作に必要な指示が、形状、色、サイズ、位置、方向、または音といった感覚的な特徴のみに依存しないことを求めています。この基準は、視覚や聴覚に制限があるユーザーが、指示内容を理解できるようにするために重要です。

この記事では、HTML、CSS、JavaScriptを学び始めた方にもわかりやすいように、具体例を交えて解説します。

1. 感覚的な特徴の依存とは？

不適切な指示の例

• 「右上の青いボタンをクリックしてください」
  → 位置（右上）や色（青い）に依存している。
• 「矢印の形をクリックしてください」
  → 形状（矢印）に依存している。

こうした指示は、次のようなユーザーにとって理解が難しい場合があります：

• 視覚障害を持つ方：色や形が見えないため指示がわからない。
• 色覚異常を持つ方：特定の色を認識できない。
• 認知障害を持つ方：空間的な位置を認識しにくい。

適切な指示の例

• 「[送信]と書かれたボタンをクリックしてください」
  → テキストでの説明がある。
• 「メニューから「設定」を選択してください」
  → 操作対象が明確。

2. 基準を満たす実装方法

a. テキストでの説明を追加

感覚的な特徴に頼る場合は、必ずテキストで説明を補足します。

不適切な例

<p>赤いボタンをクリックしてください。</p>
<button style="background-color: red;">送信</button>

改善例

<p>[送信]と書かれた赤いボタンをクリックしてください。</p>
<button style="background-color: red;">送信</button>

ポイント

• 色だけでなく、ボタンに「送信」と明示し、テキストで説明します。

b. セマンティックなHTMLを活用

セマンティックなHTMLを使用することで、支援技術に情報を正しく伝えられます。

不適切な例

<div onclick="submitForm()" style="width: 100px; height: 50px; background-color: green;"> </div>

改善例

<button onclick="submitForm()">送信</button>

ポイント

• 見た目のデザインだけに頼らず、ボタン要素を使用することで目的が明確になります。

c. 音声の代替を提供

音声だけで情報を伝える場合は、必ず代替となるテキストを提供します。

不適切な例

• 音声アナウンス：「次に進むにはビープ音が聞こえたらボタンを押してください。」

改善例

• 音声アナウンスに加え、画面に次のようなテキストを表示：

  <p>「次へ」ボタンを押してください。</p>
  <button>次へ</button>
  

3. よくある失敗例とその対策

a. 色だけで情報を伝える

失敗例

<p>赤い背景の項目が必須入力です。</p>

改善策

<p>必須入力項目は[必須]と表示されています。</p>
<form>
  <label>名前 <span>[必須]</span></label>
  <input type="text">
</form>

b. 形状や位置だけで情報を伝える

失敗例

<p>右上の矢印をクリックしてください。</p>
<img src="arrow.png" alt="矢印">

改善策

<p>[次へ]ボタンをクリックしてください。</p>
<button>次へ</button>

4. 実装における注意点

テキストを優先

• 指示は必ずテキストで提供します。
• 感覚的な特徴を補足的に利用するのは構いませんが、代替情報を必ず提供します。

ARIA属性を活用

• ARIAラベルを使って、視覚的に理解できない場合でも補助情報を提供します。

例

<button aria-label="次のステップに進む">次へ</button>

5. アクセシビリティのメリット

「1.3.3 感覚的な特徴」を遵守することで、以下のようなユーザーに配慮できます：

• 視覚障害を持つ方：支援技術を通じて内容を理解可能。
• 色覚異常を持つ方：色以外の情報で操作可能。
• 認知障害を持つ方：わかりやすい指示により、操作ミスが減少。

まとめ

WCAG 2.2の「1.3.3 感覚的な特徴」は、コンテンツの操作や理解を、形状や色といった感覚的な特徴のみに依存しないようにすることを求めています。

• テキストによる指示を追加し、感覚的な特徴を補足的な要素として扱います。
• セマンティックなHTMLやARIA属性を活用し、支援技術への対応を強化します。

これらを実践することで、すべてのユーザーにとって使いやすいウェブコンテンツを提供する第一歩を踏み出せます！

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。