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
mattsuu
September 07, 2024
Technology
5
2.7k
React Aria で実現する次世代のアクセシビリティ
Web Developer Conference 2024 (2024/09/07) での発表資料
https://web-study.connpass.com/event/321711/
mattsuu
September 07, 2024
Tweet
Share
More Decks by mattsuu
See All by mattsuu
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
270
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.2k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
470
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.6k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.1k
Other Decks in Technology
See All in Technology
robocopy の怖い話/scary-story-about-robocopy
emiki
0
410
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
330
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
160
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
880
Wasmで社内ツールを作って配布しよう
askua
0
150
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
370
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.6k
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.1k
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
240
今日からあなたもGeminiを好きになる
subaruhello
1
660
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
680
Featured
See All Featured
Building an army of robots
kneath
306
45k
Docker and Python
trallard
45
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Side Projects
sachag
455
43k
Making Projects Easy
brettharned
117
6.3k
How GitHub (no longer) Works
holman
314
140k
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