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
9k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
2
6.2k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
yajihum
0
1.3k
Other Decks in Technology
See All in Technology
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
2.1k
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
440
ここはMCPの夜明けまえ
nwiizo
28
10k
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
230
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
8
3.5k
AIエージェント開発手法と業務導入のプラクティス
ykosaka
5
1.6k
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
770
アジャイル脅威モデリング#1(脅威モデリングナイト#8)
masakane55
3
230
Ops-JAWS_Organizations小ネタ3選.pdf
chunkof
2
180
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
180
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
870
今日からはじめるプラットフォームエンジニアリング
jacopen
5
1.2k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
530
Building Adaptive Systems
keathley
41
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
GitHub's CSS Performance
jonrohan
1030
460k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Navigating Team Friction
lara
184
15k
GraphQLとの向き合い方2022年版
quramy
46
14k
Adopting Sorbet at Scale
ufuk
76
9.3k
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 フレームワーク・ライブラリは何でも良さそう