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
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
Search
やじはむ
April 19, 2024
Technology
3
1.1k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
BARフロントえんどう #2 「CSS Library / Framework」での登壇資料
やじはむ
April 19, 2024
Tweet
Share
More Decks by やじはむ
See All by やじはむ
TypeScriptのパフォーマンス改善
yajihum
3
1.6k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
3
3.2k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
yajihum
0
950
Other Decks in Technology
See All in Technology
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
540
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
8
4.9k
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
130
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.5k
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
630
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
10
1.1k
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
3.7k
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.4k
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
150
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
130
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
230
kcp: Kubernetes APIs Are All You Need #techfeed_live / TechFeed Experts Night 28th
ytaka23
1
170
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
The Invisible Side of Design
smashingmag
294
49k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Navigating Team Friction
lara
179
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.4k
Documentation Writing (for coders)
carmenintech
60
4k
Designing the Hi-DPI Web
ddemaree
276
33k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Into the Great Unknown - MozCon
thekraken
15
1k
The Invisible Customer
myddelton
114
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Transcript
アクセシビリティを考慮した 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 )
None
状態に合わせてdata 属性が付与される
NextUI ・⭐️19.1k ・Tailwind CSS ベース ・最初からスタイルが当たっている ・内部でReact Aria を使用 ・パッケージサイズ:
504.5kB(@nextui-org/react) +43.7kB(framer-motion)
None
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 フレームワーク・ライブラリは何でも良さそう