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
2
1.1k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
BARフロントえんどう #2 「CSS Library / Framework」での登壇資料
やじはむ
April 19, 2024
Tweet
Share
More Decks by やじはむ
See All by やじはむ
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
3
3.2k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
yajihum
0
940
Other Decks in Technology
See All in Technology
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
110
本当のAWS基礎
toru_kubota
1
620
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
500
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
210
ルーターでプレゼンする
puhitaku
1
3.2k
アクセス制御にまつわる改善 / Improving access control
itkq
0
590
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
3
600
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
910
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
460
Azureの基本的な権限管理の勉強会
yhana
1
2k
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
790
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
340
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
A better future with KSS
kneath
231
16k
The Invisible Customer
myddelton
114
12k
Adopting Sorbet at Scale
ufuk
69
8.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Designing with Data
zakiwarfel
96
4.8k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
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 フレームワーク・ライブラリは何でも良さそう