React Spectrum Libraries によるアクセシブルなUIの構築 @ryo_manba 2023/12/14 Nihonbashi.js #8

⾃⼰紹介 • まっつー / Ryo Matsukawa • X（@ryo_manba） • Cybozu のフロントエンドエンジニア • 最近は Next.js の App Router 書いてます

話すこと 1. アクセシブルなコンポーネントについて 2. React Spectrum Libraries について 3. React Aria による振る舞いの実装 4. React Stately による状態の管理 5. メリット / デメリット 6. まとめ

ウェブアクセシビリティとは • ⼼⾝の機能に制約のある⼈でも、情報にアクセスし利⽤できること • ⼀時的な障害や状況的制約を持つ⼈々にもアクセスを提供する • メガネやコンタクトレンズを忘れたとき • マウスやキーボードの故障 • サポート例 • 視覚障害︓読み上げ機能 • 上肢障害︓細かい⼒加減が必要ない、インタラクティブな要素の設計

どのように実装するか • W3C の Authoring Practices Guide（APG) が役⽴つ • UI コンポーネントをアクセシブル にするための実装例と解説

APG のガイドライン • WAI-ARIA 属性の正しい使⽤⽅法やキーボードサポートなど、 アクセシブルなコンポーネント実装について解説されている

アクセシブルな実装における問題点 • WAI-ARIA 属性 • 使い⽅を誤ると本来の⽬的とは逆にアクセシビリティを低くしてしまう • キーボードサポート • 各キー⼊⼒に対してイベントハンドラを実装するとコード量が肥⼤する • ドメインロジックとの組み合わせでメンテが⼤変に aria-label などのスクリーンリーダーによる対応やキーボード、タッチデバイス による操作性については妥協するしかない…︖

React Spectrum Libraries • Adobe が提供するアクセシブルで堅牢なユーザー体験を⽀援 するライブラリ郡 • 4種類が提供されている • Internationalized︓国際化⽤のライブラリ • React Spectrum︓Adobe のデザインシステムを実装したもの • React Aria︓アクセシビリティと動作を提供する • React Stately︓クロスプラットフォームの状態管理

React Spectrum の設計思想 • State Hook • プラットフォーム間で共有され、ウェブ、React Native、 その他のどのプラットフォームでも動作する状態管理 • Behavior Hook • イベント処理、アクセシビリティ、国際化 • Component • Behavior Hook と State Hook を組み合わせて ⾒た⽬を実装

React Spectrum の設計思想

React Aria • React Hooks のライブラリ • useButton, useSelect, etc.. • UI コンポーネントにアクセシビリティと動作 を提供する • マウス、タッチ、キーボード、 スクリーンリーダーのサポート • マルチブラウザやクロスプラットフォーム、 国際化に対応

React Aria の使⽤例 • レンダリングを提供しないため、 DOM の構造を⾃由に定義 できる • Hooks によって返される DOM Props を適切な要素 に渡すのは実装者の責務

useButton を使う理由 • ボタンは実際にはかなりのインタラクションをサポートしている • マウスによるクリック • タッチスクリーンでのタップ • キーボードによるフォーカスと Enter や Space キーにより有効化 • スクリーンリーダーなどの⽀援技術 • デバイスやブラウザ間で動作が異なる • 詳しくは React Spectrum が提供しているブログを参照 • Building a Button Part 1: Press Events

React Stately • React Hooks のライブラリ • useSelectState, useTableState, etc.. • クロスプラットフォームの状態管理を 提供する • React Aria と組み合わせて使⽤できる

React Stately の使⽤例 • React Aria との 組み合わせが容易 • setValue などのメソッドで 外部から状態を変えることも できる

React Aria と React Stately のメリ/デメ • メリット • 柔軟なカスタマイズが可能 • 操作やアクセシビリティをコンポーネントの実装から切り出せる • デメリット • 意図的に低レベルな API として作られているため、学習コストがかかる

React Aria Components • React Aria と React Stately を組み合わせた Headless UI ライブラリ • スタイルを当てるだけで簡単に実装できる • 2023年内に安定版の v1.0 のリリースが明⾔されている

React Aria Components

まとめ • Headless UI ライブラリと⽐べ、柔軟なカスタマイズが可能 • React Aria Components から導⼊してみて、 必要に応じて React Aria と React Stately を活⽤すると良さそう • React Spectrum Libraries を活⽤してアクセシブルなコンポーネント を実装しよう