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
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
4.7k
モバイル界のMCPを考える
naoto33
0
390
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
120
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
3
390
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
6.6k
Connect 100+を支える技術
kanyamaguc
0
170
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
240
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
150
AI専用のリンターを作る #yumemi_patch
bengo4com
5
3.8k
本が全く読めなかった過去の自分へ
genshun9
0
740
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Balancing Empowerment & Direction
lara
1
400
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing Experiences People Love
moore
142
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Adopting Sorbet at Scale
ufuk
77
9.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
How to Ace a Technical Interview
jacobian
277
23k
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