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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Takayuki Miura
November 22, 2024
Programming
0
67
React Ariaを使ったアクセシブルなコンポーネント開発
Takayuki Miura
November 22, 2024
Tweet
Share
More Decks by Takayuki Miura
See All by Takayuki Miura
2023年2月22日はじめてのIT勉強会
kp047i
0
200
ぬま大学第7期最終発表会報告資料
kp047i
0
95
Other Decks in Programming
See All in Programming
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
280
高速開発のためのコード整理術
sutetotanuki
1
410
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
250
Fluid Templating in TYPO3 14
s2b
0
130
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
130
Data-Centric Kaggle
isax1015
2
780
CSC307 Lecture 04
javiergs
PRO
0
660
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
4k
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
310
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
MUSUBIXとは
nahisaho
0
140
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Designing for Performance
lara
610
70k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
84
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
330
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
300
Speed Design
sergeychernyshev
33
1.5k
So, you think you're a good person
axbom
PRO
2
1.9k
AI: The stuff that nobody shows you
jnunemaker
PRO
2
270
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
77
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
430
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
98
Transcript
React Ariaを使ったアクセシブルな コンポーネント開発 2024/11/22 Sendai Frontend Meetup #14 株式会社Hajimari 三浦鷹将
自己紹介 三浦鷹将 kappy(@kp047i) 株式会社Hajimariのエンジニア TSKaigi 2024/2025 スタッフ 先月東京 → 仙台に引っ越しました
今日話すこと
React Ariaとは React Ariaを使ってコンポーネントを開発すると きのポイント ほぼReactの話になってしまいます 🙇♂️
React Ariaとは
React Ariaとは Adobeが提供している、HeadlessなUIコンポーネントとReact Hooksのライ ブラリ アクセシビリティや国際化、さまざまなデバイスでの動作をサポートしてお り、デザインシステムを構築する開発者がスタイリングなどに専念できる
React Ariaの特徴 - アクセシビリティ アクセシビリティに関する実装はWAI-ARIA Authoring Practicesに従ってい る スクリーンリーダーやキーボードナビゲーションに対応 フォームに関するコンポーネントには表示用のラベルとARIAラベルがな
い場合に警告が出る 全てのコンポーネントを様々なデバイス、ブラウザ、スクリーンリーダーで テスト macOSのSafariとChromeのVoiceOver Windows の Firefox および Chrome でのJAWS Windows 版 Firefox および Chrome のNVDA iOS の VoiceOver Android の Chrome でのTalkBack
様々なデバイスやプラットフォームで一貫したインタラクション マウス、タッチ、キーボード、スクリーンリーダーに対応したアプリケ ーションが作れる clickではなくpressというイベントを扱う キーボードのenterの押下やスマホでのタッチ操作等のイベント を抽象化 他にもhoverやfocusなどのイベントもデバイス間の違いを吸収 React Ariaの特徴 -
インタラクション :hoverや:activeなどの擬似クラスではなく JSのstateからスタイルを変更することを推奨している
React Stately React Aria React Aria Components React Ariaに関するパッケージ State
Hook Behavior Hook Component ※ React SpectrumというAdobeのデザインシステムも存在
React Stately(State Hook) WebやReact Nativeで使用できる 各コンポーネントの状態管理とコアロジックをプラットフォームに依存しな い形で実装 CollectionやSelectなどの複雑なロジックを再利用できる 静的なコンポーネント等では使われていない
React Aria Hooks(Behavior Hook) インタラクションやアクセシビリティを 管理 キーボードやタッチなどの動作を定義 ARIA属性の指定 独立して使えたりも、React Statelyと組
み合わせても使える
React Aria Components React Aria HooksとReact Aria Statelyを基にしたHeadlessなUIコンポー ネントライブラリ スタイリング
CSS Modules CSS in JS Tailwind
React Aria Componentsを 使うときのポイント
Composition中心の設計 小さなコンポーネントを組み合わせてより 複雑なUIに対応する 再利用性 Contextを利用して選択状態や、リストの 開閉状態を子コンポーネントに伝えている 状態に応じて見た目を変えたい時には Render Propsを用いてchildrenが引数を受 け取る形も可能
Collection ListやTable, Menuなどの複数のアイテムを扱 うコンポーネントで使用する概念 キーボードでのナビゲーションや、パフォー マンス向上のための仕組みをサポート 静的コレクション 固定のアイテム 動的コレクション fetchしたデータやユーザーの操作で変化
するアイテム アイテムにidを付与してレンダリング結果 をキャッシュ
スタイリング 任意の方法でスタイリングできる
実際に使ってみて
実際に使ってみて 複雑なアクセシビリティ対応を任せられるので他の開発に専念しや すい 段階的に導入できそう 企業が開発元なのでOSSが活発だし安心感がある 初めてのコントリビュートができた 🎉 ライブラリの関係性や特性を理解しないといけないのが少し大変
参考 [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)