React Ariaを使ったアクセシブルなコンポーネント開発

Transcript

1. React Ariaを使ったアクセシブルな コンポーネント開発 2024/11/22 Sendai Frontend Meetup #14 株式会社Hajimari 三浦鷹将
2. 自己紹介 三浦鷹将 kappy(@kp047i) 株式会社Hajimariのエンジニア TSKaigi 2024/2025 スタッフ 先月東京 → 仙台に引っ越しました
3. 今日話すこと
4. React Ariaとは React Ariaを使ってコンポーネントを開発すると きのポイント ほぼReactの話になってしまいます 🙇‍♂️
5. React Ariaとは
6. React Ariaとは Adobeが提供している、HeadlessなUIコンポーネントとReact Hooksのライ ブラリ アクセシビリティや国際化、さまざまなデバイスでの動作をサポートしてお り、デザインシステムを構築する開発者がスタイリングなどに専念できる
7. React Ariaの特徴 - アクセシビリティ アクセシビリティに関する実装はWAI-ARIA Authoring Practicesに従ってい る スクリーンリーダーやキーボードナビゲーションに対応 フォームに関するコンポーネントには表示用のラベルとARIAラベルがな い場合に警告が出る 全てのコンポーネントを様々なデバイス、ブラウザ、スクリーンリーダーで テスト macOSのSafariとChromeのVoiceOver Windows の Firefox および Chrome でのJAWS Windows 版 Firefox および Chrome のNVDA iOS の VoiceOver Android の Chrome でのTalkBack
8. 様々なデバイスやプラットフォームで一貫したインタラクション マウス、タッチ、キーボード、スクリーンリーダーに対応したアプリケ ーションが作れる clickではなくpressというイベントを扱う キーボードのenterの押下やスマホでのタッチ操作等のイベント を抽象化 他にもhoverやfocusなどのイベントもデバイス間の違いを吸収 React Ariaの特徴 - インタラクション :hoverや:activeなどの擬似クラスではなく JSのstateからスタイルを変更することを推奨している
9. React Stately React Aria React Aria Components React Ariaに関するパッケージ State Hook Behavior Hook Component ※ React SpectrumというAdobeのデザインシステムも存在
10. React Stately(State Hook) WebやReact Nativeで使用できる 各コンポーネントの状態管理とコアロジックをプラットフォームに依存しな い形で実装 CollectionやSelectなどの複雑なロジックを再利用できる 静的なコンポーネント等では使われていない
11. React Aria Hooks(Behavior Hook) インタラクションやアクセシビリティを 管理 キーボードやタッチなどの動作を定義 ARIA属性の指定 独立して使えたりも、React Statelyと組 み合わせても使える
12. React Aria Components React Aria HooksとReact Aria Statelyを基にしたHeadlessなUIコンポー ネントライブラリ スタイリング CSS Modules CSS in JS Tailwind
13. React Aria Componentsを 使うときのポイント
14. Composition中心の設計 小さなコンポーネントを組み合わせてより 複雑なUIに対応する 再利用性 Contextを利用して選択状態や、リストの 開閉状態を子コンポーネントに伝えている 状態に応じて見た目を変えたい時には Render Propsを用いてchildrenが引数を受 け取る形も可能
15. Collection ListやTable, Menuなどの複数のアイテムを扱 うコンポーネントで使用する概念 キーボードでのナビゲーションや、パフォー マンス向上のための仕組みをサポート 静的コレクション 固定のアイテム 動的コレクション fetchしたデータやユーザーの操作で変化 するアイテム アイテムにidを付与してレンダリング結果 をキャッシュ
16. スタイリング 任意の方法でスタイリングできる
17. 実際に使ってみて
18. 実際に使ってみて 複雑なアクセシビリティ対応を任せられるので他の開発に専念しや すい 段階的に導入できそう 企業が開発元なのでOSSが活発だし安心感がある 初めてのコントリビュートができた 🎉 ライブラリの関係性や特性を理解しないといけないのが少し大変
19. 参考 [React Aria](https://react-spectrum.adobe.com/react- aria/index.html) [React Aria で実現する次世代のアクセシビリティ - Speaker Deck](https://speakerdeck.com/ryo_manba/react-aria-deshi- xian-suruci-shi-dai-noakusesibiritei) [React Aria でアクセシブルなコンポーネントを作成する] (https://azukiazusa.dev/blog/react-aria-accessible- component/#%E3%81%BE%E3%81%A8%E3%82%81)