サイトアイコン IT & ライフハックブログ|学びと実践のためのアイデア集

WCAG 2.2「3.1.4 略語」とは?Level AAAの要件、実装例、テスト方法

monitor displaying error text

Photo by Pixabay on Pexels.com

WCAG(Web Content Accessibility Guidelines)2.2の達成基準3.1.4「略語」は、ページ内の略語について、展開形または意味を特定できる仕組みを提供することを求めるLevel AAAの基準です。

略語を知っていることを前提にせず、読者が略語に出会った場所から無理なく意味を確認できるようにします。

略語と展開形の意味

略語とは、長い名称や語句を短く表したものです。

展開形とは、省略する前の正式な名称や語句を指します。

展開形を示すだけで意味が伝わりにくい場合は、短い説明も添えます。

同じ文字列が文脈によって別の意味を持つ場合は、その箇所でどの意味なのかを特定できる書き方が必要です。

達成基準3.1.4が求めること

実装の目的は、すべての略語に同じ印を付けることではありません。

読者が本文を理解するために必要な展開形または意味へ到達できる状態を作ることです。

実装方法の選び方

方法 適した場面 実装時の注意
初出で展開形を併記する 略語が少ない記事や案内文 読者が本文だけで意味を確認できるようにする
<abbr>要素を使う 略語と展開形をHTMLで関連付けたい場合 title属性だけに説明を任せず、見える説明と組み合わせる
用語集を設ける 略語が多いページや複数ページで共通の用語を使う場合 本文から用語集へ移動できるリンクを用意する
詳しい解説へリンクする 短い展開形だけでは意味を説明しきれない場合 リンク先の内容が略語の説明に直接対応しているか確認する

初出で正式名称を示す

もっとも分かりやすい方法は、略語を最初に使う箇所で展開形を併記することです。

<p>このページは、Web Content Accessibility Guidelines(WCAG)に基づいています。</p>

読者は別の場所へ移動しなくても、その場で「WCAG」が何を表すのか確認できます。

<abbr>要素で関連付ける

HTMLの<abbr>要素を使うと、略語と展開形をマークアップできます。

<p>このページは、Web Content Accessibility Guidelines(<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>)に基づいています。</p>

title属性による表示だけに依存せず、上の例のように展開形を本文にも書いておくと、説明を見つけやすくなります。

略語の初出説明と<abbr>要素の使い分けは、関連記事でも詳しく紹介しています。

用語集を用意する

略語が多いページでは、説明を一か所にまとめた用語集が役立ちます。

本文中の略語から用語集へ移動できるリンクを設けると、読者が必要なときに意味を確認できます。

<p>略語の意味は、<a href="#glossary">ページ内の用語集</a>で確認できます。</p>

<h2 id="glossary">用語集</h2>
<dl>
  <dt>WCAG</dt>
  <dd>Web Content Accessibility Guidelines</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

文脈ごとに意味を示す

略語が複数の意味を持つ場合は、一律の説明では足りません。

たとえば「ATM」がAutomated Teller Machineを指す箇所と、Adaptive Traffic Managementを指す箇所が同じページにあるなら、それぞれの箇所で展開形を示します。

<p>Automated Teller Machine(ATM)を利用します。</p>
<p>交通管理の文脈では、Adaptive Traffic Management(ATM)を指します。</p>

よくある失敗と改善方法

略語だけを書いて説明しない

「この基準はWCAGに基づいています」だけでは、WCAGを知らない読者が意味を確認できません。

初出で「Web Content Accessibility Guidelines(WCAG)」と書けば、同じページ内で説明を完結できます。

title属性だけに依存する

<abbr>要素にtitle属性を付けただけで、読者が必ず説明を確認できるとは限りません。

初出の展開形や用語集など、本文から確認できる方法を併用します。

同じ略語を一つの意味で説明する

略語の意味が文脈で変わる場合、一つの展開形だけを示すと別の箇所を誤読させるおそれがあります。

略語を使う箇所ごとに文脈を確認し、その場所での意味を明記します。

説明と関係の薄いページへリンクする

リンクを置くだけでは、略語の意味を特定できる仕組みになりません。

リンク先がその略語の展開形または意味を直接説明しているかを確認し、リンク文にも行き先の内容を具体的に書きます。

テスト方法

略語の意味が実際に確認できるかは、本文とマークアップの両方を見て判断します。

  1. ページ内の略語を洗い出す
  2. 初出の近くに展開形または説明があるか確認する
  3. 複数の意味を持つ略語が、文脈ごとに説明されているか確認する
  4. 用語集を使う場合は、本文から移動して元の内容へ戻れるか確認する
  5. <abbr>要素を使う場合は、HTMLの関連付けと画面上の説明を確認する
  6. 支援技術を利用する読者にも内容が伝わるか、実際の読み上げを含めて確認する

自動テストはマークアップの点検を補助できますが、展開形が文脈に合っているか、説明だけで内容を理解できるかまでは判断できません。

最後は人が本文を読み、略語を初めて見る読者でも意味をたどれるかを確認します。

公開前のチェックリスト

実装時の判断基準

達成基準3.1.4への対応では、初出で展開形を見える形で示す方法を基本にし、略語の数や説明の長さに応じて<abbr>要素、用語集、関連ページへのリンクを組み合わせます。

略語を知らない読者が説明を探し回らず、文脈に合う意味を確認できることを公開前の判断基準にします。

当社では、Webアクセシビリティの導入を支援するUUU Webアクセシビリティを提供しています。アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。

モバイルバージョンを終了