Accessible name (アクセシブル名)

アクセシブル名とは、ユーザーインターフェイス要素の名前のことで、支援技術のユーザーに要素のラベル付けを提供する HTML 要素に関連付けられたテキストのことです。

アクセシブル名は、要素の目的や意図を伝えます。これはユーザーが、その要素が何のためにあり、どのように操作するのかを理解するのに役立ちます。一般的に、要素のアクセシブル名はページ内で固有のものであるべきです。これにより、ユーザーは要素を他の要素と判別しやすくなり、操作したい要素を特定しやすくなります。

要素や HTML マークアップによっては、アクセシブル名の値は可視コンテンツ（例えば <figcaption> 内のテキスト）か不可視コンテンツ（例えば要素に設定した aria-label 属性）、あるいはどちらも組み合わせたものから得られるかもしれません。要素のアクセシビリティ名がどのように決定されるかは、アクセシブル名計算に基づいており、要素によって異なります。

アクセシブル名として可視テキストを使用するのが最善です。 <a>、<td>、<button> など多くの要素は、そのコンテンツからアクセシブル名を取得します。例えば、 <a href="foo.html">Bar</a> と指定された場合、このハイパーリンクのアクセシブル名は "Bar" です。

他の要素は、関連する要素のコンテンツからアクセシブル名を取得します。例えば、 <fieldset> や <table> 要素がそれぞれ子孫の <legend> や <caption> 要素を格納する場合、親のアクセシブル名を提供する入れ子要素の関連付けは自動的に行われます。 <textarea> や <input> のようなフォーム要素の場合、アクセシブル名は関連する <label> 要素から決まります。この関連付けは <label> 要素の for 属性をフォーム要素の id と照合するように設定することで明示的に定義する必要があります。あるいは、フォームコントロールが <label> 要素の中に直接入れ子になっている場合には、暗黙的な関連付けが作成されます。

要素によっては、アクセシブル名は要素の属性から決まります。例えば <img> の場合は alt 属性です。 <img src="grape.jpg" alt="banana"/> と指定された場合、画像のアクセシブル名は "banana" です。

可視コンテンツと要素、または複数のテキストノードと要素の関連付けを作成するには、 aria-labelledby 属性を使用します。アクセシブル名を必要とする UI 要素に関連付ける可視テキストがない場合、 aria-label 属性を使用します。 <code>、<del>、<mark> のようなインラインテキストをマークアップする要素には、名前を追加すべきではありません。

テキストコンテンツの節など、多くの要素にはアクセシブル名は必要ありません。コントロールはすべてアクセシブル名を持つべきです。情報を伝え、純粋に表示するものではない画像もすべてそうです。

支援技術は、要素のロールとともにアクセシブル名であるアクセシビリティ名プロパティをユーザーに提供します。多くの要素はアクセシブル名を必要としませんが、指定したロールを持つ要素のコンテンツを上書きしたり補足したりするためには、アクセシブル名を提供する必要があります。例えば、 tabpanel は、ユーザーが tab ロールを持つ関連要素をアクティブにした後に現れるコンテンツの節です。このロールは <div> 要素のように、必要な名前が付いていない要素に設定することができます。 tab はコントロールであり、アクセシビリティ名を持たなければなりません。 tabpanel は tab の子要素（コンテンツ節）です。 aria-labelledby を tabpanelに追加するのが最善の手法です。