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
アクセシビリティを意識したReact開発
Search
Ryo Ofusa
October 29, 2021
Technology
0
1.7k
アクセシビリティを意識したReact開発
【READYFOR×コミューン】業務に活かせるReact LT & 座談会 資料
Ryo Ofusa
October 29, 2021
Tweet
Share
More Decks by Ryo Ofusa
See All by Ryo Ofusa
デザインシステムの課題あれこれ
3randy9
2
2.2k
Other Decks in Technology
See All in Technology
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
An introduction to Claude Code SDK
choplin
2
1.1k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
本当にわかりやすいAIエージェント入門
segavvy
1
400
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
microCMSではじめるAIライティング
himaratsu
0
150
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Featured
See All Featured
Visualization
eitanlees
146
16k
BBQ
matthewcrist
89
9.7k
Building Adaptive Systems
keathley
43
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Site-Speed That Sticks
csswizardry
10
700
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Bash Introduction
62gerente
613
210k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
アクセシビリティを意識した React 開発 大房 稜 2021/10/29 1
自己紹介 2 READYFOR株式会社 プロダクトエンジニア /フロントエンドエンジニア 名前:大房 稜 趣味:ボカロP、DJ、ダンス ← 最近液タブ買ってインターネットお絵かきマ
ンデビュー #ReactLT
前提 アクセシビリティとは? 3 #ReactLT
前提 Accessibility • Access(アクセス)+ -bility(可能性) • アクセスのしやすさ • 利用のしやすさ 4
#ReactLT
前提 Accessibility • Access(アクセス)+ -bility(可能性) • アクセスのしやすさ • 利用のしやすさ →「障害のある人がWebを使えるようにすること」を指すことではない
色々な人間が居て色々なニーズがあることを理解する(環境,言語,デバイス) 5 #ReactLT
前提 アクセシビリティには2つの観点がある • ヒューマンリーダブル • マシンリーダブル 6 #ReactLT
前提 今回はマシンリーダブルの観点について 7 #ReactLT
マシンリーダブルにしよう Webブラウザが解釈しやすいコンテンツということ • SEO対策 • アクセシビリティ対応 ◦ 音声読み上げ ◦ キーボード操作
8 #ReactLT
マシンリーダブルにしよう Webブラウザが解釈しやすいコンテンツということ • SEO対策 • アクセシビリティ対応 ◦ 音声読み上げ ◦ キーボード操作
9 #ReactLT
マシンリーダブルにしよう セマンティックなマークアップが まず大事 CSS-in-JSで宣言的なUIを作っ ているとマークアップ意識しなく なりぎみ 10 #ReactLT
マシンリーダブルにしよう 通常のHTMLで表現できないUIについてしっかり考える → WAI-ARIAの使用を検討しましょう 11 #ReactLT
WAI-ARIA(ウェイ アリア)とは WAI-ARIAはWeb Accessibility Initiative Accessible Rich Internet Applicationsの略です。 W3Cによって定められた追加
仕様で、HTMLだけでは表すことのできない構造や状態などを明 示することができます。(wiki引用) 12 #ReactLT
マシンリーダブルにしよう Reactドキュメント「アクセシビリティ」より 13 #ReactLT
マシンリーダブルにしよう UIコンポーネントを作る時、W3CのWAI-ARIA オーサリング・プラ クティスやAdobeのデザインシステムからreact-ariaやアクセシブ ルが売りのchakra-uiなどを参考にしてみましょう 14 #ReactLT
マシンリーダブルにしよう • StorybookでのUIコンポーネント集を管理しよう ◦ 汎用化したコンポーネントでマークアップミスを無くす、作 るUIについての設計を考えられる → WAI-ARIAを使ったUIをしっかり汎用化する 15 #ReactLT
マシンリーダブルにしよう • storybook-addon-a11yの活用をする ◦ コンポーネントごとにアクセシビリティチェックを表示してく れる ◦ クリティカルになりえそうな部分の早めの発見ができる 16 #ReactLT
17
テストが書きやすくなる • マシンリーダブルにコンポーネントを作成しておくとテストが書 きやすくなる • 振る舞い駆動開発(BDD)しやすい 18 #ReactLT
テストが書きやすくなる 19 #ReactLT
テストが書きやすくなる • 状態を持っているコンポーネントの判断などWAI-ARIAを使う と解決するパターンが多くある • テストも書きやすくなってアクセシブルにもなり一石二鳥 20 #ReactLT
まとめ アクセシビリティを意識して開発すると • UI設計を意識してコードを書けるようになり、情報を より多くの人に届けることができる • テストが書きやすくなり開発スピードUP → より価値のあるプロダクトを提供できる! 21
#ReactLT
プロダクトをより多くの人に届けるというのを意識して コードを書いていきましょう!
None