アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定

BARフロントえんどう #2 「CSS Library / Framework」での登壇資料

Transcript

1. アクセシビリティを考慮した UI/CSS フレームワーク・ライブラリ選定 @BAR フロントえんどう #2 「CSS Library / Framework 」 やじはむ 2024/04/17
2. ↑ロリスさん 自己紹介 やじはむ / yajihum ・株式会社COMPASS のフロントエンドエンジニア 　・公教育で使われるプロダクトを開発 ・エンジニア3 年目 ・最近はパフォーマンスやアクセシビリティに興味がある ・好きなCSS フレームワークはTailwind CSS
3. UI/CSS フレームワーク・ライブラリを どういう基準で選定するか
4. ・人気度、将来性 ・エコシステムの充実度 ・パフォーマンス ・カスタマイズのしやすさ ・実装の手軽さ ・言語やフレームワークとの相性 ・メンテナンスのしやすさ などなど...
5. ・人気度、将来性 ・エコシステムの充実度 ・パフォーマンス ・カスタマイズのしやすさ ・実装の手軽さ ・言語やフレームワークとの相性 ・メンテナンスのしやすさ ・アクセシビリティへの対応のしやすさ ←これ入れたい
6. なぜ？👺
7. 1. 長期的な計画が必要 アクセシビリティは非機能要件の1 つ 企画〜調達〜設計・実装・テスト〜リリースの全ての 過程で考慮する必要がある 後からやればいいやは結構大変
8. 2. 実装が大変 aria 属性の付与 キーボード操作 デバイスに応じた制御 見やすくわかりやすいデザイン わかりやすい仕様・UX
9. 3. 必要とされる知識の多さ 期待される結果がどんなコンポーネントかによって 異なる かつ、コンポーネント単位だけでなくそれらを合わ せた時の挙動も考える必要がある
10. 実装をいかに楽に行えるかが重要 とにかく手間やコストがかかる
11. 技術選定の時から どんなUI/CSS フレームワーク・ライブラリなら 実装しやすいかを考えておく アクセシビリティ対応を楽に行うためには
12. UI ライブラリ
13. Radix UI (Radix Primitives) ・⭐️14.1k ・ヘッドレス ・shadcn/ui( ⭐️56.2k) の内部で使用 ・28 コンポーネント ・パッケージサイズ：使用するコンポーネントによる 　（例：一番大きいSelect で 30.04 kB ）
15. 状態に合わせてdata 属性が付与される
16. NextUI ・⭐️19.1k ・Tailwind CSS ベース ・最初からスタイルが当たっている ・内部でReact Aria を使用 ・パッケージサイズ： 　504.5kB(@nextui-org/react) ＋43.7kB(framer-motion)
18. React Aria Components ・⭐️11.6k （react-spectrum ） ・Adobe が提供 ・ヘッドレス ・react-aria でフックも提供 ・粒度が低くカスタマイズのしやすさは大きい ・アクセシビリティへの対応度は一番高そう ・パッケージサイズ： 167.6kB(react-aria-components) ＋126.8kB(react-aria)
19. CSS ライブラリ・フレームワーク
20. ・data 属性に対してスタイルを当てられる ・擬似クラスを使用できる
21. CSS Modules Tailwind CSS Panda CSS vanilla-extract stylex data 属性 擬似クラス ⭐️ - 78.5k 4.6k 9.2k 8k 前提：React Server Components で使用可能
22. ・全部使えるので基本的にどのCSS フレームワーク・ライブラリ でも問題なし ・状態に応じたスタイルが煩雑にならないような書き方ができる ものが良さそう ・後はサポートしている擬似クラスの量や、Utility First, CSS in JS 、コンポーネントは別でスタイルのみの提供があるかどうか、 Type Safe かどうかなどの違い
23. plugin: tailwindcss-react-aria-components data-[selected]:bg-blue-400 ↓ selected:bg-blue-400 で書ける
24. 終わりに
25. ・デザインシステムを作りたいならReact Aria ・効率的に実装したいならRadix UI やNextUI など ・CSS フレームワーク・ライブラリは何でも良さそう