ARIA ラベルを使用してアクセス可能な要素の説明を作成する
ラベル
ARIA には、要素にラベルと説明を追加するためのメカニズムがいくつか用意されています。実際、ARIA はユーザー補助のヘルプや説明テキストを追加する唯一の方法です。ARIA がユーザー補助機能用のラベルを作成するために使用するプロパティを見てみましょう。
aria-label
aria-label を使用すると、アクセス可能なラベルとして使用する文字列を指定できます。これは、label 要素など、他のネイティブのラベル付けメカニズムをオーバーライドします。たとえば、button にテキスト コンテンツと aria-label の両方がある場合、aria-label 値のみが使用されます。
要素の目的を視覚的に示している（テキストの代わりにグラフィックを使用するボタンなど）が、画像のみを使用して目的を示すボタンなど、視覚情報にアクセスできないユーザーに対してその目的を明確にする必要がある場合は、aria-label 属性を使用できます。
aria-labelledby
aria-labelledby を使用すると、DOM 内の別の要素の ID を要素のラベルとして指定できます。
これは label 要素を使用する場合とよく似ていますが、いくつか重要な違いがあります。
aria-labelledbyは、ラベル付け可能な要素だけでなく、どの要素でも使用できます。label要素はラベルを付けるものを参照しますが、aria-labelledbyの場合は関係が逆になります。つまり、ラベル付けされるものは、そのラベルを付けたものを指します。- ラベル付け可能な要素に関連付けることができるラベル要素は 1 つだけですが、
aria-labelledbyは IDREF のリストを受け取り、複数の要素からラベルを作成できます。ラベルは、IDREF が指定された順序で連結されます。 aria-labelledbyを使用すると、非表示の要素やユーザー補助ツリーに存在しない要素を参照できます。たとえば、ラベルを付ける要素の横に非表示のspanを追加し、aria-labelledbyでその要素を参照できます。- ただし、ARIA はユーザー補助ツリーにのみ影響するため、
aria-labelledbyでは、label要素を使用したような使い慣れたラベルクリック動作は実現しません。
重要な点として、aria-labelledby は要素の他のすべての名前ソースをオーバーライドします。したがって、たとえば要素に aria-labelledby と aria-label の両方がある場合、または aria-labelledby とネイティブ HTML label がある場合、常に aria-labelledby ラベルが優先されます。
人間関係
aria-labelledby は関係属性の例です。関係属性は、DOM 関係に関係なく、ページ上の要素間にセマンティック関係を作成します。aria-labelledby の場合、「この要素はその要素によってラベル付けされる」という関係になります。
ARIA 仕様には 8 つの関係属性が示されています。このうちの 6 つ（aria-activedescendant、aria-controls、aria-describedby、aria-labelledby、aria-owns）は、1 つ以上の要素への参照を使用して、ページ上の要素間に新しいリンクを作成します。各ケースの違いは、リンクの意味とユーザーへの表示方法です。
ARIA 所有
aria-owns は、最も広く使用されている ARIA 関係の一つです。この属性を使用すると、DOM 内の別個の要素を現在の要素の子として扱う必要があることや、既存の子要素を異なる順序で再配置することを支援技術に伝えることができます。たとえば、ポップアップ サブメニューが親メニューの近くに視覚的に配置されているものの、視覚的表示に影響するため親の DOM 子にできない場合は、aria-owns を使用してサブメニューを親メニューの子としてスクリーン リーダーに表示できます。
aria-activedescendant
aria-activedescendant は関連する役割を果たします。ページのアクティブな要素がフォーカスされている要素であるのと同様に、要素のアクティブな子孫を設定すると、実際にその親がフォーカスを持っているときに、その要素をフォーカスされた要素としてユーザーに提示する必要があることを支援技術に伝えることができます。たとえば、リストボックスでは、ページ フォーカスをリストボックス コンテナに残したまま、その aria-activedescendant 属性を現在選択されているリストアイテムに更新したままにできます。これにより、現在選択されているアイテムが、フォーカスされているアイテムのように支援技術に表示されます。
ARIA 記述：
aria-describedby は、aria-labelledby がラベルを提供するのと同じ方法で、アクセス可能な説明を提供します。aria-labelledby と同様に、aria-describedby は、本来は表示されない要素を参照する可能性があります。これは DOM に非表示になっているか、支援技術ユーザーに非表示になっているかは関係ありません。これは、支援技術のユーザーのみに適用されるか、すべてのユーザーに適用されるかにかかわらず、ユーザーが必要とする可能性のある追加の説明テキストがある場合に便利な手法です。
一般的な例としては、パスワードの最小要件を説明するテキストが添えられたパスワード入力フィールドがあります。ラベルとは異なり、この説明はユーザーに表示される場合もあれば、まったく表示されない場合もあります。ユーザーは、それにアクセスするかどうかを選択したり、他のすべての情報の後に表示したり、他の情報に先回りして表示したりできます。たとえば、ユーザーが情報を入力する場合、入力内容がエコーバックされ、要素の説明が中断される可能性があります。したがって、説明は補足的な情報を伝達するための優れた方法ですが、重要ではありません。要素の役割など、より重要な情報の妨げにはなりません。
aria-posinset と aria-setsize
残りの関係属性は少し異なり、連携して機能します。aria-posinset（「セット内の位置」）と aria-setsize（「セットのサイズ」）は、リストなど、セット内の兄弟要素間の関係を定義するものです。
DOM 内の要素でセットのサイズを決定できない場合（たとえば、DOM 内に大きなリストがすべて一度に配置されないように遅延レンダリングが使用されている場合など）は、aria-setsize で実際のセットサイズを指定し、aria-posinset でセット内の要素の位置を指定できます。たとえば、1,000 個の要素が含まれる可能性があるセットで、特定の要素が DOM で最初に出現しているにもかかわらず、aria-posinset が 857 であると伝えて、動的 HTML 手法を使用して、ユーザーがオンデマンドで全リストを探索できるようにします。
