WCAG 2.2 ガイドライン「1.3.6 目的の特定」Level AAA について
はじめに
WCAG 2.2の「1.3.6 目的の特定」は、マークアップ言語を使用して実装されたコンテンツにおいて、ユーザーインターフェースコンポーネント、アイコン、および領域の目的がプログラム的に特定可能であることを求めています。この基準は、支援技術がそれらのコンポーネントの目的を正しく認識し、ユーザーに適切な支援を提供できるようにするために重要です。
この記事では、初心者向けにHTML、CSS、JavaScriptを使った具体的な実装方法を詳しく解説します。
1. 目的の特定が必要な理由
視覚的に情報を提供するアイコンやボタン、セクション（領域）は、その役割や目的をプログラム的に特定する必要があります。これにより、次のようなユーザーに配慮できます：
- 視覚障害を持つ方：支援技術が各コンポーネントの目的を伝えることで、操作や理解が容易になります。
- 認知障害を持つ方：明確な意味付けにより、コンテンツの利用が簡単になります。
2. 実装方法
a. ARIAランドマークを使用してページ領域を識別
ARIAランドマークを使うことで、ページ内の主要な領域を特定できます。
HTMLの例
<header role="banner">
<h1>ウェブアクセシビリティのガイドライン</h1>
</header>
<nav role="navigation" aria-label="主要ナビゲーション">
<ul>
<li><a href="#section1">セクション1</a></li>
<li><a href="#section2">セクション2</a></li>
</ul>
</nav>
<main role="main">
<section id="section1">
<h2>セクション1の内容</h2>
<p>ここに主要なコンテンツが含まれます。</p>
</section>
</main>
<footer role="contentinfo">
<p>© 2024 ウェブアクセシビリティガイドライン</p>
</footer>
ポイント
role="banner"、role="main"、role="navigation"などを使用してページの主要領域を識別します。aria-labelでラベルを追加し、領域の目的を具体的に説明します。
b. アイコンの目的を明示する
アイコンだけで情報を伝える場合、スクリーンリーダーが目的を伝えられるようにaria-labelやalt属性を使用します。
HTMLの例
<button aria-label="検索">
<img src="search-icon.png" alt="検索">
</button>
ポイント
aria-labelは、スクリーンリーダーにアイコンの目的を伝える役割を果たします。- 画像アイコンには必ず
alt属性を付けます。
c. フォーム要素の目的を特定
フォーム要素にはaria-requiredやaria-invalidを使用して、状態や目的を明確にします。
HTMLの例
<form>
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" aria-required="true">
<label for="password">パスワード：</label>
<input type="password" id="password" name="password" aria-required="true" aria-invalid="false">
</form>
ポイント
aria-required="true"で必須入力フィールドであることを示します。aria-invalid="true"を使用してエラーステータスを伝えます。
d. HTMLセマンティクスを活用
HTML5のセマンティック要素を活用することで、ページの構造と各セクションの目的を簡単に特定できます。
HTMLの例
<article>
<header>
<h2>記事のタイトル</h2>
</header>
<p>記事の本文がここに表示されます。</p>
</article>
ポイント
<article>、<aside>、<section>などを使用して、コンテンツの意味を明確にします。
3. よくある失敗例とその対策
a. アイコンの目的を示さない
失敗例
<button>
<img src="search-icon.png">
</button>
- スクリーンリーダーでアイコンの意味が伝わりません。
改善策
<button aria-label="検索">
<img src="search-icon.png" alt="検索">
</button>
b. ランドマークを使用しない
失敗例
<div id="header">
<h1>ウェブサイトタイトル</h1>
</div>
改善策
<header role="banner">
<h1>ウェブサイトタイトル</h1>
</header>
4. アクセシビリティのメリット
a. スクリーンリーダーの対応向上
支援技術が各コンポーネントの役割や目的を正確に伝えることで、視覚障害のあるユーザーがコンテンツを操作しやすくなります。
b. ユーザー体験の向上
目的が明確になることで、認知障害のあるユーザーや初心者にも直感的に操作しやすいインターフェースを提供できます。
まとめ
WCAG 2.2の「1.3.6 目的の特定」は、コンポーネントや領域の目的をプログラム的に特定可能にすることで、アクセシビリティを向上させる重要な基準です。
実装ポイント
- ARIAランドマークを使って領域を識別。
aria-labelやalt属性を使用してアイコンやボタンの目的を明確化。- フォーム要素の状態（必須入力、エラーなど）を
aria-*属性で示す。 - セマンティックなHTMLでページ構造を明確に。
これらを取り入れることで、誰にでも使いやすいウェブコンテンツを作成する第一歩を踏み出せます！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。