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
2.1k
アクセシビリティを考慮した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
2
5.8k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
yajihum
0
1.2k
Other Decks in Technology
See All in Technology
コンテナサプライチェーンセキュリティ
kyohmizu
1
120
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
12
3.6k
OPENLOGI Company Profile
hr01
0
60k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
240
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
160
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
6
1.8k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
100
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
170
JavaにおけるNull非許容性
skrb
1
210
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
530
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
110
Amazon Aurora のバージョンアップ手法について
smt7174
1
110
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Code Review Best Practice
trishagee
67
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Building an army of robots
kneath
303
45k
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 フレームワーク・ライブラリは何でも良さそう