コンボボックスとオートコンプリートを正しく作る
スクリーンリーダーにも理解できる検索可能な選択欄を作ります。
「コンボボックスとオートコンプリートを正しく作る」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
コンボボックスとは
comboboxは、候補を表示するポップアップと組み合わせた入力欄です。入力すると一致する結果がドロップダウン表示される検索ボックスを思い浮かべてください。🔍
連携して動く2つの部分
コンボボックスには、ユーザーが入力するtext inputと、候補を表示する独立したポップアップリストボックスがあります。ARIAによって2つが関連付けられ、スクリーンリーダーにも連携が伝わります。
入力欄にロールを設定する
テキスト入力自体にrole="combobox"を設定します。これにより支援技術は、ここに入力すると候補リストが表示されることを認識できます。
<input role="combobox" aria-expanded="false"
aria-controls="results" type="text">ポップアップを参照する
入力欄にaria-controlsを設定し、ポップアップのidを指定します。これにより、開閉するリストボックスと入力欄が関連付けられます。
開閉状態を通知する
リストが表示されたらaria-expandedをtrueに、非表示になったらfalseに切り替えます。スクリーンリーダーはこの属性からポップアップの状態を通知します。
ポップアップはリストボックス
候補のコンテナにはrole="listbox"を設定し、各候補にはrole="option"を設定します。これにより、ユーザーにとって親しみやすく操作しやすいリストになります。
<ul id="results" role="listbox">
<li role="option" id="o1">Apple</li>
</ul>フォーカスは入力欄に留める
ポイントは、キーボードのフォーカスをinputから移さないことです。ユーザーは入力を続けながら、矢印キーで候補間のハイライトを移動できます。
aria-activedescendant
入力欄のaria-activedescendantに、ハイライトされた候補のidを指定します。これにより、実際のフォーカスを移動せずに、スクリーンリーダーがアクティブな候補を読み上げられます。
<input role="combobox"
aria-activedescendant="o1">想定されるキー
下矢印と上矢印で候補間を移動し、Enterでアクティブな候補を選択し、Escapeでポップアップを閉じます。これらのキー操作はAPGに基づいています。
選択した候補を示す
ハイライトされた候補にはaria-selected="true"を設定し、それ以外にはfalseを設定します。単一選択のコンボボックスでは、一度に選択される候補は1つだけにしてください。
オートコンプリートの動作
aria-autocompleteを使って候補の表示方法を示します。絞り込んだメニューには"list"を、テキストも入力欄内で補完する場合には"both"を指定します。
クイックチェック
ユーザーがコンボボックスの候補を下矢印で移動しています。どの属性が、どの候補がアクティブかをスクリーンリーダーに伝えるでしょうか。
まとめ
comboboxは入力欄とリストボックスの組み合わせです。aria-controlsとaria-expandedで関連付け、フォーカスを入力欄に留め、aria-activedescendantでアクティブな候補を追跡します。✅
よくある質問
「コンボボックスとオートコンプリートを正しく作る」レッスンは無料ですか？
はい。「コンボボックスとオートコンプリートを正しく作る」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「コンボボックスとオートコンプリートを正しく作る」で何を学びますか？
スクリーンリーダーにも理解できる検索可能な選択欄を作ります。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「コンボボックスとオートコンプリートを正しく作る」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- APGを読む：パターン、キー、例
- コンボボックスとオートコンプリートを正しく作る
- メニュー、メニューバー、メニューボタン
- treegridとその他の高度なパターン