React でアクセシブルな Tree View を実装する

Tree View は階層構造を効率よく操作できる一方、ARIA ロールを付けるだけではアクセシブルになりません。WAI-ARIA APG を参考に、roving tabindex、矢印キー、選択、文字検索を備えた単一選択の Tree View を React で実装する方法を紹介します Tree View は、ファイルシステムや商品カテゴリのような階層構造を表示するための UI です。親ノードを展開すると子ノードが現れ、折りたたむと再び隠れます。見た目だけであれば、入れ子にした <ul> と開閉処理で簡単に作れそうに見えます。 しかし、見た目だけをツリー構造にしても支援技術を使うユーザーはそのことを理解できず、適切な操作が妨げられる要因となってしまいます。ウェブアクセシビリティの観点では、WAI-ARIA 仕様に沿ってロールや aria- 属性で UI の意味と状態を伝えたうえで、APG

[yarumato]

“Tree View は、ファイルシステムや商品カテゴリのような階層構造を表示するための UI です。”