buttonとaria-expandedでアコーディオンを作る

アコーディオンは、見出しを展開・折りたたみしてコンテンツを表示する構造です。タブとは異なり、各セクションを個別に開けます。

すべてのアコーディオンのヘッダーを実際のボタンにしてください。ボタンはフォーカス可能で、EnterとSpaceで操作でき、スクリーンリーダーにも自動的に通知されます。

クリック可能なdivをヘッダーにする場合は注意してください。divはフォーカスできず、キーボード操作にも反応せず、その役割も支援技術に伝わりません。

ボタンにaria-expandedを追加すると、スクリーンリーダーが折りたたまれているか展開されているかを読み上げます。この1つの状態が、アコーディオンをアクセシブルにします。

ユーザーがボタンを操作したら、aria-expandedをtrueとfalseの間で切り替えます。パネルが実際に表示されているかどうかと、常に同期させてください。

ボタンにaria-controlsを使い、開くパネルのidを設定します。ユーザーは、このヘッダーでどのコンテンツが表示されるのかを把握できます。

セクションを閉じるときは、パネルにhidden属性を付けます。再び開くまで、ページとアクセシビリティツリーの両方から除外されます。

各ボタンをh3のような実際の見出しの中に配置します。スクリーンリーダー利用者は、見出しナビゲーションを使ってセクション間を移動できるようになります。

単独の表示・非表示機能はタブセットではなくディスクロージャーです。必要なのはaria-expandedを持つボタンだけで、tablistやtabのロールは一切必要ありません。

切り替えた後も、ユーザーが押したボタンにフォーカスを残します。パネルへフォーカスを勝手に移さないでください。キーボード利用者を驚かせることになります。

ボタン自体が状態を持つため、スクリーンリーダーは毎回、展開または折りたたみと読み上げます。ユーザーは、操作すると何が起きるのかを常に把握できます。

アコーディオンのヘッダーは、見出しで囲んだaria-expanded付きのボタンであることを学びました。状態を切り替え、パネルを指定し、閉じたときはパネルを隠します。