WCAG 2.2 ガイドライン「3.1.4 略語」Level AAA について
はじめに
WCAG 2.2の「3.1.4 略語」は、ウェブページ内で使用されている略語の展開形や意味を特定するための仕組みを提供することを求めています。この基準は、略語の意味がわからないユーザーにとって、正確な情報を得るために重要です。
1. 基準の概要
要件
- 略語（例: “WCAG”、“HTML”）について、その展開形や説明を提供する必要があります。
- 略語が文脈によって異なる意味を持つ場合、それぞれの意味を特定する仕組みを提供します。
2. 実装方法
a. abbr要素を使用する
HTMLのabbr要素を使うことで、略語に展開形を紐づけることができます。
例: abbr要素を使用
<p>このページは <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> に基づいています。</p>
title属性に展開形を記述することで、ユーザーが略語にマウスホバーすると意味が表示されます。
b. 略語の近くに展開形を提供する
略語の初出時に展開形を示す方法です。
例: 略語の後に展開形を追加
<p>私たちのプロジェクトは、Web Content Accessibility Guidelines（WCAG）に準拠しています。</p>
- 初めて略語を使用する際に展開形を明記します。
c. 用語集（グロッサリー）を作成する
略語の一覧とその意味をまとめた用語集を提供します。
例: 用語集をページ内に配置
<h2>用語集</h2>
<dl>
<dt>WCAG</dt>
<dd>Web Content Accessibility Guidelines</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
例: 外部のグロッサリーへのリンクを追加
<p>略語の詳細については、<a href="#glossary">用語集</a>をご覧ください。</p>
d. 外部リソースや辞書へのリンクを提供する
オンライン辞書や専門用語集へのリンクを活用します。
例: 辞書へのリンク
<p>詳細は、<a href="https://example.com/glossary/wcag" target="_blank">WCAGの定義</a>をご覧ください。</p>
3. よくある失敗例とその改善策
a. 略語の展開形がない
失敗例
<p>この基準は WCAG に基づいています。</p>
問題点
- "WCAG"の意味が明示されておらず、ユーザーが混乱する可能性があります。
改善策
<p>この基準は、Web Content Accessibility Guidelines（<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>）に基づいています。</p>
b. 略語が複数の意味を持つが説明がない
失敗例
<p>ATMは便利です。ATMはAdaptive Traffic Managementの略です。</p>
問題点
- 略語の意味が文脈に応じて異なるが、明確な区別がない。
改善策
- 略語ごとに異なる展開形を示します。
<p>ATM（Automated Teller Machine）は便利です。別の文脈では、ATMはAdaptive Traffic Managementの略です。</p>
4. アクセシビリティのメリット
a. 略語の理解が容易になる
- 略語の意味が明確になることで、すべてのユーザーがコンテンツを正確に理解できます。
b. 支援技術との連携
- スクリーンリーダーが略語の展開形を読み上げるため、視覚障害のあるユーザーにも適切に情報が伝わります。
c. 多言語対応の強化
- 略語の意味を提供することで、非母語話者にも内容がわかりやすくなります。
5. テスト方法
a. 手動テスト
- コンテンツ内の略語を特定。
- それぞれの略語に展開形や説明が提供されているか確認。
b. 自動テストツール
- AxeやWAVEを使用して、
abbr要素やtitle属性が適切に設定されているかチェック。
まとめ
WCAG 2.2の「3.1.4 略語」は、略語の展開形や説明を提供することで、すべてのユーザーがコンテンツを正確に理解できるようにすることを目的としています。
実装ポイント
abbr要素を使用して略語の展開形を提供する。- 略語の初出時に展開形を明記する。
- 用語集や外部リソースへのリンクを提供する。
これにより、略語に馴染みのないユーザーにも親しみやすいウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。