オートコンプリートウィジェットのアクセシビリティ

WAI-ARIAのコンボボックスパターンでは、オートコンプリートウィジェット用のロールとプロパティの組み合わせが定義されています。コンボボックスは、リストボックスのポップアップと組み合わせた入力要素です。このパターンにより、視覚的なUIを見られないユーザーにも、スクリーンリーダーがインタラクティブな動作、利用可能なオプション、現在の選択項目を正しく読み上げられるようになります。

入力欄をdivでラップし、role="combobox"を設定します。これにより、支援技術に対して、入力欄に関連付けられたポップアップリストがあることを伝えられます。このラッパーにaria-expanded={isOpen}を設定し、候補リストが現在表示されているか非表示かをスクリーンリーダーに伝えます。

入力要素自体には、aria-autocomplete="list"（ポップアップに候補のリストが含まれる）、aria-haspopup="listbox"（クリックまたは入力によってリストボックスが開く）、aria-expanded={isOpen}、およびドロップダウンリスト要素のidを指すaria-controls="suggestion-list-id"を設定します。

入力欄のaria-activedescendantは、現在ハイライトされているオプションのidを指します。selectedIndexが0の場合は、aria-activedescendant="option-0"を設定します。スクリーンリーダーはこれを使って、実際のフォーカスを入力欄から移動させずに、どの項目がアクティブかを読み上げます。項目が選択されていない場合は、属性を削除するか空文字列に設定します。

ドロップダウンのコンテナ要素にはrole="listbox"と、入力欄のaria-controlsに一致する一意のidを設定します。このロールにより、アクセシビリティツリーはこの要素を選択可能なオプションのリストとして認識します。リストボックスには、入力欄のaria-activedescendantを介して間接的にフォーカスが当たります。

すべての候補項目にはrole="option"と、option-0、option-1などの一意のidを設定します。現在ハイライトされている項目を示すため、aria-selected={index === selectedIndex}を追加します。ユーザーが矢印キーで移動すると、スクリーンリーダーはオプションの内容と、それが選択されているかどうかの両方を読み上げます。

ユーザーがArrowDownを押してaria-activedescendantがoption-1に更新されると、VoiceOverは「React hooks、5件中2件」のように読み上げます。スクリーンリーダーは、ARIAマークアップからオプションのテキストとリスト内の位置を自動的に読み取ります。キーボード操作に追加のライブリージョンは必要ありません。

macOSではVoiceOver（Cmd+F5で切り替え）を、WindowsではNVDA（無料でダウンロード可能）を使ってテストします。入力欄に移動して入力を始めます。スクリーンリーダーがコンボボックスのロール、見つかった結果の件数、矢印キーで移動した各オプションを読み上げることを確認します。WAI-ARIA Authoring Practices Guideの例と動作を比較します。

候補が非同期で読み込まれる場合は、aria-live="polite"とaria-atomic="true"を設定した、視覚的には非表示のdivを追加します。読み込みが完了したら、そのテキスト内容を「5件の結果が見つかりました」や「結果が見つかりませんでした」のように更新します。スクリーンリーダーは現在の読み上げが終わった後にこのメッセージを読み上げるため、ユーザーの操作を中断せずに情報を伝えられます。

w3.org/WAI/ARIA/apgにあるWAI-ARIA Authoring Practices Guide（APG）には、動作するコード例とキーボード操作の詳細な仕様を含む、コンボボックスパターン専用のページがあります。オートコンプリート、ダイアログ、タブなどのインタラクティブなウィジェットを実装する際は、完全なアクセシビリティ対応を確実にするため、必ずAPGを参照してください。

表示されるラベル要素がない場合は、入力欄にaria-labelを設定します：aria-label="Search suggestions"。ラベルとしてplaceholderだけに頼らないでください。placeholderはユーザーが入力すると消え、すべてのスクリーンリーダーで一貫して読み上げられるわけではありません。htmlForを設定した表示用のlabel要素が、常に最適な選択肢です。

オートコンプリートの入力欄に設定するaria-activedescendant属性には、どのような目的がありますか？

ラッパーにrole="combobox"を、入力欄にaria-autocomplete="list"を設定し、aria-expanded、aria-controls、aria-activedescendantで入力欄と候補リストを関連付けます。各オプションにはrole="option"、一意のid、aria-selectedが必要です。非同期の結果件数を伝えるため、aria-liveリージョンを追加します。