Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Aria で実現する次世代のアクセシビリティ
Search
mattsu-
September 07, 2024
Technology
4
1.5k
React Aria で実現する次世代のアクセシビリティ
Web Developer Conference 2024 (2024/09/07) での発表資料
https://web-study.connpass.com/event/321711/
mattsu-
September 07, 2024
Tweet
Share
More Decks by mattsu-
See All by mattsu-
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
4.7k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
330
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
4
980
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.2k
Other Decks in Technology
See All in Technology
Understanding and Optimising INP
akshayysharma
0
150
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
190
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
210
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.8k
All your memory are belong to… whom?
ennael
PRO
0
530
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
2
300
エンジニアは伝え方が9割/90% of what engineers need is communication skills
ykanoh
2
150
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
1
1.7k
トークナイザー入門
payanotty
2
380
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
200
Sansanにおける全社横断データ分析基盤の挑戦と未来 / Challenges and Future of Cross-Organizational Data Analytics Platform at Sansan
sansan_randd
2
310
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
22
13k
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
The Cult of Friendly URLs
andyhume
76
6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
The Invisible Side of Design
smashingmag
297
50k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
231
130k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
What's in a price? How to price your products and services
michaelherold
243
11k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Transcript
React Aria で実現する次世代の アクセシビリティ まっつー / @ryo_manba 2024/09/07 Web Developer
Conference 2024
自己紹介 まっつー • サイボウズ フロントエンドエンジニア • NextUI チームメンバー • React
Aria コントリビューター • 𝕏: @ryo_manba • GitHub: @ryo-manba 2
This Talk React Aria のドキュメントやブログ記事、ソースコードを ベースに React Aria の特徴や活用方法を解説。 実際に業務で利用して得られた知見や課題についても話しま
す。 3
ウェブアクセシビリティとは • 利用者の障害の有無や年齢、利用環境にかかわらず、 あらゆる人々が情報にアクセスし利用できること • サポート例 ◦ 色覚に配慮した色を利用する ◦ キーボードだけで操作できる
◦ 画像や写真に代替テキストをつける 4
ウェブアクセシビリティの課題 • リソースが足りない ◦ 人手不足でアクセシビリティ対応が進められない • 様々な企業で重複した実装をすることになる ◦ 一般的なコンポーネントのセマンティクスやキーボードでの振る 舞いは、W3C
の ARIA Authoring Practices Guide (APG) で指 定されている 5
React Aria の登場 6
React Aria とは • Adobe が提供する Headless UI ライブラリ •
APG に従ってセマンティクスとキーボード操作が実装 • モバイルや支援技術での振る舞いもサポート 7
React Aria の活用事例 • Apple の iCloud で一部使用されている • デジタル庁のデザインコンポーネントで、React
Aria が 推奨されている(他に Radix UI など) • サイボウズでも導入経験あり https://blog.cybozu.io/entry/2024/05/22/090000 8
Adobe (Spectrum) が提供するライブラリ • React Aria • React Stately •
React Aria Components • React Spectrum • Internationalized 9
Adobe (Spectrum) が提供するライブラリ • React Aria • React Stately •
React Aria Components • React Spectrum • Internationalized この3つを使う 10
• アクセシビリティと 振る舞いを提供 • DOM 構造とスタイルを 自由にカスタマイズ可能 React Aria Hooks
11
• 各コンポーネントに特化 した状態管理を行う • 基本は React Aria Hooks と組み合わせて 使う
React Stately 12
13 React Stately が管理する状態に基づいて、React Aria Hooks が ARIA を設定する 押されてない
押された React Aria Hooks と React Stately の連携
• Hooks 内部で State をもと に ARIA を動的に設定 • 呼び出し元では
props を そのまま DOM に渡す React Aria Hooks と React Stately の連携 14
完全に理解した! コンポーネント作ってみよう! 15
DatePicker を作るぞ! 16
思ったより難しい... props 群はどう作用 する?一部を変えた い時はどうする? Dialog や Calendar はどこ からでてきた?
17
Hooks だけでは実装が大変 • React Aria Hooks と React Stately を適切に組み合わせ
て、コンポーネントを作るのはやや難易度が高い • RadixUI や Ark UI のような Headless UI コンポーネント ライブラリのほうが気軽に使える... 18
React Aria Components がリリース https://react-spectrum.adobe.com/releases/2023-12-20.html 19
React Aria Components 20 • React Aria Hooks と React
Stately を組み合わせて構築 された Headless UI コンポーネント • 40以上のカスタマイズを可能なコンポーネントを提供
課題が解決された • React Aria Hooks: 振る舞いとアクセシビリティを提供 • React Stately: コンポーネント特有の状態管理
React Aria Components の登場により学習難易度が高い問 題が解消される→ 基本はコンポーネントを組み合わせてスタ イルを当てるだけ 21 学習難易度が高い...
React Aria を使いこなす 22
React Aria の特徴 • アクセシビリティ • スタイリング • コレクション •
フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 23
React Aria の特徴 • アクセシビリティ • スタイリング • コレクション •
フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 24
APG は仕様ではない • APG の目的は ARIA 1.2 の適切な仕様を説明すること • APG
のコードを本番で使用する際は各ブラウザと支援技 術の組み合わせでテストすることが望まれる 25 https://www.w3.org/WAI/ARIA/apg/practices/read-me-first
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
なぜ Adobe が力を入れているのか • 数百を超える製品があり UI の一貫性やアクセシビリ ティ、国際化、使いやすさなど高い基準が設定されてい る •
React Aria を OSS としてコミュニティに共有し、 Web アプリケーションの水準を共に高めようとしている 27 https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html
React Aria の特徴 • アクセシビリティ • スタイリング • コレクション •
フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 28
• Vanilla CSS, TailwindCSS, Styled Components, Panda CSS, etc.. •
Framer Motion などの JavaScript アニメーション ライブラリも使える 任意の CSS フレームワークが使用可能 29
• Vanilla CSS と Tailwind CSS のサンプル実装が Storybook にまとまっ ている
• ソースコードは Zip で 落とせる 充実した Starter Kits 30
data 属性を使ったスタイルの適用 • :hover や :active などを data 属性で公開している •
マウス、タッチ、キーボードといった異なる操作方法で も一貫した動作を保証する 31
CSS 擬似クラスが問題になる例 • :active がブラウザによって異なる • タッチデバイスで :hover が残り続ける 32
https://github.com/whatwg/html/issues/7578 https://issues.chromium.org/issues/40364091
Demo https://codesandbox.io/p/sandbox/lively-sky-2d6ync 33
どのように解決しているか • 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
Render props で動的にスタイルを設定 状態に応じてクラスやスタイルを動的に切り替えられる 35
Render props の仕組み 36 Hooks から状態 を受け取る 状態を使用して 関数を実行
props は各コンポーネントの docs に記載 Render props で使用できるプロパティは各コンポーネント の docs に記載されている
37
スタイリングのまとめ • CSS 疑似クラスの代わりに data 属性を活用し、デバイ スやブラウザ間で一貫したスタイルを実現 • renderProps パターンで動的にクラスやスタイルを設定
可能 • 他に Slots や独自の CSS variables などもある 38
React Aria の特徴 • アクセシビリティ • スタイリング • コレクション •
フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 39
Collection の概要 • Menu や Listbox などの複数の要素を組み合わせたコン ポーネントを一貫して扱うための JSX ベースの
API • 大規模なコレクションでもパフォーマンスが低下しない ように設計されている • 静的コレクションと動的コレクションの2種類がある 40
Static Collection • 時間の経過とともに変化しないコレクション • メニューのようにユーザーの操作などで変更されること がないコンポーネントに使用する 41
Dynamic Collection • API のレスポンスやユーザー操作など動的に変化する データを扱う • キャッシュを元に差分があった箇所をレンダリングする 42
Array.map ではだめなの? 配列に変更があるたびに全体が再レンダリングされてしまう ため、パフォーマンス低下につながる 43 アイテムを追加 するごとに ListBox 全体が 再レンダリング
される
Dynamic Collection のキャッシュの仕組み 44 WeakMap で item の レンダリング結果を キャッシュしている
差分があった箇所のみレンダリングされる 45 追加したアイテム のみがレンダリン グされる
React Aria の特徴 • アクセシビリティ • スタイリング • コレクション •
フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 46
React Aria のフォーム • ネイティブと独自のバリデーションが利用できる • 自動的にアクセシブルなフォームを実現する仕組みが組 み込まれている 47
自動でアクセシブルなフォームを実現 48 Label と Description が Input に関連付けられ、ス クリーンリーダーで正しく 読み上げられる
ネイティブのバリデーションが利用可能 • ネイティブの制約検証が使用可能 ◦ min/max, required, minlength/maxlength, etc. • ブラウザのデフォルトの
UI ではなく、カスタムのエラー メッセージを表示できる 49
カスタムバリデーション Form で使用するコンポーネントにカスタムバリデーション を組み込むことも可能 50
様々なライブラリと組み合わせられる React Server Actions や Remix actions, React Hook Form,
Zod など様々なライブラリとの組み合わせられる 51 https://react-spectrum.adobe.com/react-aria/forms.html
React Aria の特徴 • アクセシビリティ • スタイリング • コレクション •
フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 52
コンテキストを利用して柔軟 に機能追加できる Context と Provider を利用した機能拡張 https://zenn.dev/cybozu_frontend/articles/react-aria-component-design 53
React Aria の特徴 • アクセシビリティ • スタイリング • コレクション •
フォーム • 拡張性に優れた設計 • 多言語対応 • ドラッグアンドドロップ 54
多言語対応 • 30を超える言語のサポート • 左右のミラーリング • aria-label などの組み込み文字列の翻訳 • ローカライズされた日付と数値の書式設定
55
DatePicker の例 • 年月日や曜日、aria-label の文言をローカライズ • 13種類の異なる暦システムをサポート 56
@internationalized/date • 国際化サポートするにあたり、Date オブジェクトだと 難しかったため、日付操作ライブラリをフルスクラッチ で作成している • Zag.js、Ark UI、Melt UI
(Svelte)、Bits UI (Svelte)、 Kobalte (Solid) などの多くのUIライブラリで使用されて いる 57
余談: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
React Aria の特徴 • アクセシビリティ • Styling • Collection •
Form • 多言語対応 • 拡張性 • ドラッグアンドドロップ 59
ドラッグアンドドロップの課題 • ブラウザ間の互換性 ◦ HTML Drag and Drop API のイベントの順序や挙動がブラウザ
によって異なる • アクセシビリティへの制約 ◦ キーボードとスクリーンリーダーのサポートが欠けている • APG に記載がない 60
ドラッグアンドドロップの RFC が作成 • React Ariaでドラッグアンドドロップをサポートするた めの API とインタラクションを定義 •
マウスやタッチ操作だけでなく、キーボードとスクリー ンリーダーの完全なサポートも目指す 61 https://github.com/adobe/react-spectrum/blob/main/rfcs/2020-v3-dnd.md
RFC を元に実装 • マウスとタッチでは HTML Drag and Drop API を使用
し、キーボードとスクリーンリーダー向けのインタラク ションをフルスクラッチで実装 • 13種類以上のブラウザバグの対処 • 確立されたパターンではないため、多くの実験と試行錯 誤を経て完成した 62 https://react-spectrum.adobe.com/blog/drag-and-drop.html
キーボードとスクリーンリーダーで操作可能に 63
業務で利用してみて 64
どのように運用していたか • 刷新プロジェクトで全面的に React Aria を導入 • はじめはメンバーで勉強会を開催 ◦ Collection
を理解する会、拡張の仕方を学ぶ会など • 初期は React Aria Hooks と React Stately の組み合わせ • 途中から React Aria Components をメインで活用 65
大変だったこと • 初期は React Aria hooks と React Stately を組み合わせ
て作成していたため、学習コストがかかった • React Server Components との組み合わせにも多少問題 があった(現在は改修されている) 66
刷新に向かないこともある • アクセシブルなコンポーネントを実現するためにそもそ ものデザインを変えないと正しく使えないこともある ◦ 例:ドラッグアンドドロップのドロップゾーンが最初に表示され ていない • デザイン変更なしで刷新第一優先の場合だとフル活用で きない可能性もある
67
それでも使ってよかった • 読み上げやキーボードサポートなどのアクセシビリティ 対応をライブラリ側に隠蔽することで本来注力したい開 発に力を入れられる • 一般的なパターンから逸脱していないのであれば最大限 に活用できる 68
まとめ • React Aria を活用することで最大限のアクセシビリティ が得られる • すべての機能をフル活用する必要はないので、最小限で 使ってみて徐々に便利機能を導入していくと良さそう •
開発組織が強いので今後もさらなる改善に期待 69