WCAG に出てくる「名前」とは？

• 公開日 : 2020年6月21日
• カテゴリー : ユーザビリティ / アクセシビリティ / 情報設計 (IA)

WCAG (Web Content Accessibility Guidelines : 原文 / 日本語訳) を読むと、たとえば以下のように「名前」という用語がところどころで出てきます。

達成基準 1.1.1 非テキストコンテンツ

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。

(中略)

コントロール、入力

非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。

達成基準 2.5.3 名前 (name) のラベル

ユーザインタフェース コンポーネントがテキスト又は文字画像を含むラベルを持つ場合、視覚的に提示されたテキストが名前 (name) に含まれている。

この「名前」とはいったい何でしょうか？上のふたつめの例では「名前」と「ラベル」という似たような用語が出てきますが、それぞれの意味の違いや関係が、よくわからなかったりしませんでしょうか？

両者の定義を WCAG の「6. 用語集」で見ると、以下のように書かれています。

名前 (name)

ソフトウェアが、ウェブコンテンツのコンポーネントを利用者に識別させることができるテキスト。

ラベル (label)

テキスト、又はテキストによる代替を伴うコンポーネントで、ウェブコンテンツ内のコンポーネントを識別するために利用者に提示されているもの。

どちらも言葉 (自然言語) による情報ですが、「名前」はソフトウェアに向けて提示されるもの、「ラベル」はユーザーに向けて可視的に提示されるもの、と理解すればよいでしょう。

「名前」と「ラベル」の例

たとえば、画像によって作られたリンクがあるとします。その画像内に描かれた文字情報 (リンク先の名称など) は「ラベル」です。そして、その画像の代替テキスト (<img> 要素の alt 属性) は「名前」です。

テキストリンクの (<a> タグと閉じタグに囲われた) 文言、ボタンの (<button> タグと閉じタグに囲われた) テキスト、フォームの (<input> 要素と適切に紐付けられた <label> 要素の) テキスト、は「ラベル」であると同時に「名前」でもあります。

アイコン要素の中に、aria-label 属性で記述された文言がある場合、その文言は「ラベル」ではなく「名前」になります。(属性名は「-label」なのに...ややこしいですね。)

支援技術による「名前」の処理

少し技術的な話になりますが、この WCAG に出てくる「名前」は、「accessible name」とも呼ばれ、 Accessible Name and Description Computation という仕様に基づいてユーザーエージェントに解釈される仕組みになっています。ウェブコンテンツのソースコードに記された UI コンポーネントの「名前 (accessible name)」は、ブラウザが持つ「アクセシビリティツリー (DOM ツリーを基に生成された、支援技術向けの情報ツリー)」を介してスクリーンリーダーなどの支援技術に渡され、適切な形で音声読み上げなどの多様なモダリティに変換され、ユーザーに伝えられる、という具合です。

もし HTML 要素の中に複数の「名前」が記述されている場合は、上記の仕様によって、いずれかひとつの「名前」が優先されます。たとえば、<img src="images/logo.png" alt="ロゴマーク" aria-label="トップページへ" > という記述がある場合、alt の「ロゴマーク」ではなく aria-label の「トップページへ」のほうが優先されます。WAI-ARIA の「label」系の属性 (aria-label や aria-labelledby) は、他の「名前」(画像の alt、テキストリンクのラベル、ボタンのラベル、など) を打ち消して、支援技術のユーザーに伝えなくしてしまうので、実装の際は注意が必要です。

「名前」と「ラベル」は一致しているのがよい

テキストリンクの <a> タグに囲われた文言、ボタンの <button> タグに囲われたテキスト、フォームの各 <input> に紐付けられた <label> 要素のテキストのように、多くの場合、「名前」と「ラベル」は一致しています。そしてできるだけ、このように一致しているのが望ましい形です。

というのも、音声入力を用いてウェブを利用するユーザーは、画面上に表示される UI コンポーネント (メニュー、リンク、ボタンなど) の「ラベル」を声に出して読み上げることで、ナビゲートするからです。このとき、UI コンポーネントに付いている「名前」がユーザーの発話 (読み上げられた「ラベル」) と一致していないと、ソフトウェア側 (ブラウザおよび音声認識ソフト) は反応しないので、ユーザーは混乱してしまいます。

ユーザビリティの定石として、アイコンにはラベルも併記しましょう、ということはよく言われますが、これは単にアイコンの意味の認知 (識別) だけでなく、音声入力ユーザーのサポートにもなります。視覚的にはアイコンのみを表示し、代替テキストとして aria-label を記述するという解決もありますが、これだと「名前」だけが存在する形になり、スクリーンリーダーのユーザー (視覚障害者) にはよいものの、音声入力ユーザーには発話の手がかりが見えない形になります。やはり望ましいのは、可視的な「ラベル」も存在していて、かつそれが「名前」と一致している形で実装されていることでしょう。