ドロップダウン縦
See the Pen エンターキーを使用してメニューを開閉できるドロップダウンメニュー縦型 by 阪井真実 (@dkvcfvga-the-styleful) on CodePen.
role="navigation": //メニュー全体にナビゲーションとしての役割を示します。
aria-label: //メニューの目的を説明するためのラベルを追加。
aria-expanded: //チェックボックスにこの属性を追加して、メニューが開いているか閉じているかを示します。
aria-controls: //メニューラベルがどのメニューを制御しているかを示します。
role="menu" と role="menuitem": //メニューとメニューアイテムの役割を明示します。
aria-hidden: //メニューが隠れているときに、スクリーンリーダーにそのことを伝えるために使用します。tabキーでフォーカス、エンターキーを使用してメニューを開閉できる様にしています
