Accessible description (アクセシブル説明)

アクセシブル説明は、支援技術のユーザーが UI 要素とそのコンテキストを理解するのに役立つ追加情報を提供するユーザーインターフェイス要素の説明です。これは HTML または SVG 要素に関連付けられており、その要素のアクセシブル名で指定された情報に加えて、その目的に関する追加のコンテキストをユーザーに提供します。これは、スクリーンリーダーのような支援技術を使うユーザーにとって特に重要です。要素のアクセシブル説明は、アクセシビリティツリーの一部です。

例えば、<table> のアクセシブル名は最初の <caption> で提供されます。複雑なデータ表の場合、その表を説明する 1 ～ 2 文を提供するとよいでしょう。これは、視覚的にもソースコードの順序においても、表の直前の段落または後の段落に配置することができます。ソース内の順序が異なる場合、あるいは関連付けを明示的に示す場合には、aria-describedby 属性を使用して、表とその説明を関連付けることができます。

同様に、ユーザーにパスワードを生成するよう求められた場合、<input> の password 型に対する <label> が、そのアクセシブル名を提供します。適切なアクセシブル説明には、すべてのユーザーに視覚的にわかる形で、パスワードの要件が記載されている必要があります。これは、aria-describedby 属性を通じて入力フィールドに明示的に関連付けられ、これにより、そのノードの 'description' としてアクセシビリティツリーに追加されます。

説明はテキスト文字列に縮小されます。パスワードの例では、入力要素の aria-describedby 属性の値が、要件のリストを含む HTML の <ul> の id である場合、説明はリストアイテムすべてに対するテキストおよびテキスト相当値をつなぎ合わせたものになります。

ページ上のどの要素についても、アクセシブル説明を調べることができます。ブラウザー開発者ツールのアクセシビリティタブを見ていくと、現在選択されている要素のアクセシビリティ情報が提供されています。