React Aria で実現する次世代のアクセシビリティ

Web Developer Conference 2024 (2024/09/07) での発表資料
https://web-study.connpass.com/event/321711/

Transcript

1. React Aria で実現する次世代の アクセシビリティ まっつー / @ryo_manba 2024/09/07 Web Developer Conference 2024
2. 自己紹介 まっつー • サイボウズ フロントエンドエンジニア • NextUI チームメンバー • React Aria コントリビューター • 𝕏: @ryo_manba • GitHub: @ryo-manba 2
3. This Talk React Aria のドキュメントやブログ記事、ソースコードを ベースに React Aria の特徴や活用方法を解説。 実際に業務で利用して得られた知見や課題についても話しま す。 3
4. ウェブアクセシビリティとは • 利用者の障害の有無や年齢、利用環境にかかわらず、 あらゆる人々が情報にアクセスし利用できること • サポート例 ◦ 色覚に配慮した色を利用する ◦ キーボードだけで操作できる ◦ 画像や写真に代替テキストをつける 4
5. ウェブアクセシビリティの課題 • リソースが足りない ◦ 人手不足でアクセシビリティ対応が進められない • 様々な企業で重複した実装をすることになる ◦ 一般的なコンポーネントのセマンティクスやキーボードでの振る 舞いは、W3C の ARIA Authoring Practices Guide (APG) で指 定されている 5
6. React Aria の登場 6
7. React Aria とは • Adobe が提供する Headless UI ライブラリ • APG に従ってセマンティクスとキーボード操作が実装 • モバイルや支援技術での振る舞いもサポート 7
8. React Aria の活用事例 • Apple の iCloud で一部使用されている • デジタル庁のデザインコンポーネントで、React Aria が 推奨されている（他に Radix UI など） • サイボウズでも導入経験あり https://blog.cybozu.io/entry/2024/05/22/090000 8
9. Adobe (Spectrum) が提供するライブラリ • React Aria • React Stately • React Aria Components • React Spectrum • Internationalized 9
10. Adobe (Spectrum) が提供するライブラリ • React Aria • React Stately • React Aria Components • React Spectrum • Internationalized この3つを使う 10
11. • アクセシビリティと 振る舞いを提供 • DOM 構造とスタイルを 自由にカスタマイズ可能 React Aria Hooks 11
12. • 各コンポーネントに特化 した状態管理を行う • 基本は React Aria Hooks と組み合わせて 使う React Stately 12
13. 13 React Stately が管理する状態に基づいて、React Aria Hooks が ARIA を設定する 押されてない 押された React Aria Hooks と React Stately の連携
14. • Hooks 内部で State をもと に ARIA を動的に設定 • 呼び出し元では props を そのまま DOM に渡す React Aria Hooks と React Stately の連携 14
15. 完全に理解した！ コンポーネント作ってみよう！ 15
16. DatePicker を作るぞ！ 16
17. 思ったより難しい... props 群はどう作用 する？一部を変えた い時はどうする？ Dialog や Calendar はどこ からでてきた？ 17
18. Hooks だけでは実装が大変 • React Aria Hooks と React Stately を適切に組み合わせ て、コンポーネントを作るのはやや難易度が高い • RadixUI や Ark UI のような Headless UI コンポーネント ライブラリのほうが気軽に使える... 18
19. React Aria Components がリリース https://react-spectrum.adobe.com/releases/2023-12-20.html 19
20. React Aria Components 20 • React Aria Hooks と React Stately を組み合わせて構築 された Headless UI コンポーネント • 40以上のカスタマイズを可能なコンポーネントを提供
21. 課題が解決された • React Aria Hooks: 振る舞いとアクセシビリティを提供 • React Stately: コンポーネント特有の状態管理 React Aria Components の登場により学習難易度が高い問 題が解消される→ 基本はコンポーネントを組み合わせてスタ イルを当てるだけ 21 学習難易度が高い...
22. React Aria を使いこなす 22
23. React Aria の特徴 • アクセシビリティ • スタイリング • コレクション • フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 23
24. React Aria の特徴 • アクセシビリティ • スタイリング • コレクション • フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 24
25. APG は仕様ではない • APG の目的は ARIA 1.2 の適切な仕様を説明すること • APG のコードを本番で使用する際は各ブラウザと支援技 術の組み合わせでテストすることが望まれる 25 https://www.w3.org/WAI/ARIA/apg/practices/read-me-first
26. React Aria のテスト状況 複数のデバイスとブラウザ、スクリーンリーダーを組み合わ せてテストを実施している 26 デバイス ブラウザ スクリーンリーダー macOS Safari, Chrome VoiceOver Windows Firefox, Chrome JAWS, NVDA iOS Safari VoiceOver Android Chrome TalkBack https://react-spectrum.adobe.com/react-aria/accessibility.html
27. なぜ Adobe が力を入れているのか • 数百を超える製品があり UI の一貫性やアクセシビリ ティ、国際化、使いやすさなど高い基準が設定されてい る • React Aria を OSS としてコミュニティに共有し、 Web アプリケーションの水準を共に高めようとしている 27 https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html
28. React Aria の特徴 • アクセシビリティ • スタイリング • コレクション • フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 28
29. • Vanilla CSS, TailwindCSS, Styled Components, Panda CSS, etc.. • Framer Motion などの JavaScript アニメーション ライブラリも使える 任意の CSS フレームワークが使用可能 29
30. • Vanilla CSS と Tailwind CSS のサンプル実装が Storybook にまとまっ ている • ソースコードは Zip で 落とせる 充実した Starter Kits 30
31. data 属性を使ったスタイルの適用 • :hover や :active などを data 属性で公開している • マウス、タッチ、キーボードといった異なる操作方法で も一貫した動作を保証する 31
32. CSS 擬似クラスが問題になる例 • :active がブラウザによって異なる • タッチデバイスで :hover が残り続ける 32 https://github.com/whatwg/html/issues/7578 https://issues.chromium.org/issues/40364091
33. Demo https://codesandbox.io/p/sandbox/lively-sky-2d6ync 33
34. どのように解決しているか • usePress, useHover, useFocus などの hooks で状態を管 理している • 詳しくは Spectrum のブログを読んでみてください ◦ Building a Button Part 1: Press Events ◦ Building a Button Part 2: Hover Interactions ◦ Building a Button Part 3: Keyboard Focus Behavior 34
35. Render props で動的にスタイルを設定 状態に応じてクラスやスタイルを動的に切り替えられる 35
36. Render props の仕組み 36 Hooks から状態 を受け取る 状態を使用して 関数を実行
37. props は各コンポーネントの docs に記載 Render props で使用できるプロパティは各コンポーネント の docs に記載されている 37
38. スタイリングのまとめ • CSS 疑似クラスの代わりに data 属性を活用し、デバイ スやブラウザ間で一貫したスタイルを実現 • renderProps パターンで動的にクラスやスタイルを設定 可能 • 他に Slots や独自の CSS variables などもある 38
39. React Aria の特徴 • アクセシビリティ • スタイリング • コレクション • フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 39
40. Collection の概要 • Menu や Listbox などの複数の要素を組み合わせたコン ポーネントを一貫して扱うための JSX ベースの API • 大規模なコレクションでもパフォーマンスが低下しない ように設計されている • 静的コレクションと動的コレクションの2種類がある 40
41. Static Collection • 時間の経過とともに変化しないコレクション • メニューのようにユーザーの操作などで変更されること がないコンポーネントに使用する 41
42. Dynamic Collection • API のレスポンスやユーザー操作など動的に変化する データを扱う • キャッシュを元に差分があった箇所をレンダリングする 42
43. Array.map ではだめなの？ 配列に変更があるたびに全体が再レンダリングされてしまう ため、パフォーマンス低下につながる 43 アイテムを追加 するごとに ListBox 全体が 再レンダリング される
44. Dynamic Collection のキャッシュの仕組み 44 WeakMap で item の レンダリング結果を キャッシュしている
45. 差分があった箇所のみレンダリングされる 45 追加したアイテム のみがレンダリン グされる
46. React Aria の特徴 • アクセシビリティ • スタイリング • コレクション • フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 46
47. React Aria のフォーム • ネイティブと独自のバリデーションが利用できる • 自動的にアクセシブルなフォームを実現する仕組みが組 み込まれている 47
48. 自動でアクセシブルなフォームを実現 48 Label と Description が Input に関連付けられ、ス クリーンリーダーで正しく 読み上げられる
49. ネイティブのバリデーションが利用可能 • ネイティブの制約検証が使用可能 ◦ min/max, required, minlength/maxlength, etc. • ブラウザのデフォルトの UI ではなく、カスタムのエラー メッセージを表示できる 49
50. カスタムバリデーション Form で使用するコンポーネントにカスタムバリデーション を組み込むことも可能 50
51. 様々なライブラリと組み合わせられる React Server Actions や Remix actions, React Hook Form, Zod など様々なライブラリとの組み合わせられる 51 https://react-spectrum.adobe.com/react-aria/forms.html
52. React Aria の特徴 • アクセシビリティ • スタイリング • コレクション • フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 52
53. コンテキストを利用して柔軟 に機能追加できる Context と Provider を利用した機能拡張 https://zenn.dev/cybozu_frontend/articles/react-aria-component-design 53
54. React Aria の特徴 • アクセシビリティ • スタイリング • コレクション • フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 54
55. 多言語対応 • 30を超える言語のサポート • 左右のミラーリング • aria-label などの組み込み文字列の翻訳 • ローカライズされた日付と数値の書式設定 55
56. DatePicker の例 • 年月日や曜日、aria-label の文言をローカライズ • 13種類の異なる暦システムをサポート 56
57. @internationalized/date • 国際化サポートするにあたり、Date オブジェクトだと 難しかったため、日付操作ライブラリをフルスクラッチ で作成している • Zag.js、Ark UI、Melt UI (Svelte)、Bits UI (Svelte)、 Kobalte (Solid) などの多くのUIライブラリで使用されて いる 57
58. 余談：DatePickerの作成からブログ公開までに3年 • DatePicker に着手していると投稿があったのが 2019年6月6日 ◦ https://x.com/devongovett/status/1136402636754673664 • DatePicker のブログを公開したのが 2022年6月21日 ◦ https://react-spectrum.adobe.com/blog/date-and-time-pic kers-for-all.html 58
59. React Aria の特徴 • アクセシビリティ • Styling • Collection • Form • 多言語対応 • 拡張性 • ドラッグアンドドロップ 59
60. ドラッグアンドドロップの課題 • ブラウザ間の互換性 ◦ HTML Drag and Drop API のイベントの順序や挙動がブラウザ によって異なる • アクセシビリティへの制約 ◦ キーボードとスクリーンリーダーのサポートが欠けている • APG に記載がない 60
61. ドラッグアンドドロップの RFC が作成 • React Ariaでドラッグアンドドロップをサポートするた めの API とインタラクションを定義 • マウスやタッチ操作だけでなく、キーボードとスクリー ンリーダーの完全なサポートも目指す 61 https://github.com/adobe/react-spectrum/blob/main/rfcs/2020-v3-dnd.md
62. RFC を元に実装 • マウスとタッチでは HTML Drag and Drop API を使用 し、キーボードとスクリーンリーダー向けのインタラク ションをフルスクラッチで実装 • 13種類以上のブラウザバグの対処 • 確立されたパターンではないため、多くの実験と試行錯 誤を経て完成した 62 https://react-spectrum.adobe.com/blog/drag-and-drop.html
63. キーボードとスクリーンリーダーで操作可能に 63
64. 業務で利用してみて 64
65. どのように運用していたか • 刷新プロジェクトで全面的に React Aria を導入 • はじめはメンバーで勉強会を開催 ◦ Collection を理解する会、拡張の仕方を学ぶ会など • 初期は React Aria Hooks と React Stately の組み合わせ • 途中から React Aria Components をメインで活用 65
66. 大変だったこと • 初期は React Aria hooks と React Stately を組み合わせ て作成していたため、学習コストがかかった • React Server Components との組み合わせにも多少問題 があった（現在は改修されている） 66
67. 刷新に向かないこともある • アクセシブルなコンポーネントを実現するためにそもそ ものデザインを変えないと正しく使えないこともある ◦ 例：ドラッグアンドドロップのドロップゾーンが最初に表示され ていない • デザイン変更なしで刷新第一優先の場合だとフル活用で きない可能性もある 67
68. それでも使ってよかった • 読み上げやキーボードサポートなどのアクセシビリティ 対応をライブラリ側に隠蔽することで本来注力したい開 発に力を入れられる • 一般的なパターンから逸脱していないのであれば最大限 に活用できる 68
69. まとめ • React Aria を活用することで最大限のアクセシビリティ が得られる • すべての機能をフル活用する必要はないので、最小限で 使ってみて徐々に便利機能を導入していくと良さそう • 開発組織が強いので今後もさらなる改善に期待 69