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

アクセシビリティを考慮した UI/CSS フレームワーク・ライブラリ選定 @BAR フロントえんどう #2 「CSS Library / Framework
」やじはむ 2024/04/17

↑ロリスさん自己紹介やじはむ / yajihum ・株式会社COMPASS のフロントエンドエンジニア　・公教育で使われるプロダクトを開発・エンジニア3 年目
・最近はパフォーマンスやアクセシビリティに興味がある・好きなCSS フレームワークはTailwind CSS

UI/CSS フレームワーク・ライブラリをどういう基準で選定するか

・人気度、将来性・エコシステムの充実度・パフォーマンス・カスタマイズのしやすさ・実装の手軽さ・言語やフレームワークとの相性・メンテナンスのしやすさなどなど...

・人気度、将来性・エコシステムの充実度・パフォーマンス・カスタマイズのしやすさ・実装の手軽さ・言語やフレームワークとの相性・メンテナンスのしやすさ・アクセシビリティへの対応のしやすさ ←これ入れたい

なぜ？👺

1. 長期的な計画が必要アクセシビリティは非機能要件の1 つ企画〜調達〜設計・実装・テスト〜リリースの全ての過程で考慮する必要がある後からやればいいやは結構大変

2. 実装が大変 aria 属性の付与キーボード操作デバイスに応じた制御見やすくわかりやすいデザインわかりやすい仕様・UX

3. 必要とされる知識の多さ期待される結果がどんなコンポーネントかによって異なるかつ、コンポーネント単位だけでなくそれらを合わせた時の挙動も考える必要がある

実装をいかに楽に行えるかが重要とにかく手間やコストがかかる

技術選定の時からどんなUI/CSS フレームワーク・ライブラリなら実装しやすいかを考えておくアクセシビリティ対応を楽に行うためには

UI ライブラリ

Radix UI (Radix Primitives) ・⭐️14.1k ・ヘッドレス・shadcn/ui( ⭐️56.2k) の内部で使用・28
コンポーネント・パッケージサイズ：使用するコンポーネントによる　（例：一番大きいSelect で 30.04 kB ）

状態に合わせてdata 属性が付与される

NextUI ・⭐️19.1k ・Tailwind CSS ベース・最初からスタイルが当たっている・内部でReact Aria を使用・パッケージサイズ：
　504.5kB(@nextui-org/react) ＋43.7kB(framer-motion)

React Aria Components ・⭐️11.6k （react-spectrum ）・Adobe が提供・ヘッドレス・react-aria
でフックも提供・粒度が低くカスタマイズのしやすさは大きい・アクセシビリティへの対応度は一番高そう・パッケージサイズ： 167.6kB(react-aria-components) ＋126.8kB(react-aria)

CSS ライブラリ・フレームワーク

・data 属性に対してスタイルを当てられる・擬似クラスを使用できる

CSS Modules Tailwind CSS Panda CSS vanilla-extract stylex data 属性
擬似クラス ⭐️ - 78.5k 4.6k 9.2k 8k 前提：React Server Components で使用可能

・全部使えるので基本的にどのCSS フレームワーク・ライブラリでも問題なし・状態に応じたスタイルが煩雑にならないような書き方ができるものが良さそう・後はサポートしている擬似クラスの量や、Utility First, CSS in JS
、コンポーネントは別でスタイルのみの提供があるかどうか、 Type Safe かどうかなどの違い

plugin: tailwindcss-react-aria-components data-[selected]:bg-blue-400 ↓ selected:bg-blue-400 で書ける

終わりに

・デザインシステムを作りたいならReact Aria ・効率的に実装したいならRadix UI やNextUI など・CSS フレームワーク・ライブラリは何でも良さそう

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

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

やじはむ

More Decks by やじはむ

Other Decks in Technology

Featured

Transcript