エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【React】アクセシビリティに考慮したアコーディオンを実装する
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【React】アクセシビリティに考慮したアコーディオンを実装する
2022.10.28 アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に... 2022.10.28 アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーディオンは 1 つのページ内で複数のセクションのコンテンツを表示する際に、スクロールを減らすためによく 使用されます。例えば「よくある質問」のようなページで使われていることを見たことがあるかと思います。 アコーディオンの要件 アコーディオンをアクセシブルにするためには、以下の実装を行う必要があります。 ロール・ステート・プロパティ それぞれのアコーディオンヘッダーには button ロールを含める それぞれのアコーディオンヘッダーのボタンはページ内で適切な値が設定された aria-level 属性を持つ heading ロール(<h1>