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
2k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
BARフロントえんどう #2 「CSS Library / Framework」での登壇資料
やじはむ
April 19, 2024
Tweet
Share
More Decks by やじはむ
See All by やじはむ
TypeScriptのパフォーマンス改善
yajihum
21
8.9k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
3
5.7k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
yajihum
0
1.2k
Other Decks in Technology
See All in Technology
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
RSNA2024振り返り
nanachi
0
500
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
データの品質が低いと何が困るのか
kzykmyzw
6
1k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
What's in a price? How to price your products and services
michaelherold
244
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Side Projects
sachag
452
42k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Adopting Sorbet at Scale
ufuk
74
9.2k
Facilitating Awesome Meetings
lara
51
6.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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 フレームワーク・ライブラリは何でも良さそう