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.4k
アクセシビリティを意識したReact開発
【READYFOR×コミューン】業務に活かせるReact LT & 座談会 資料
Ryo Ofusa
October 29, 2021
Tweet
Share
More Decks by Ryo Ofusa
See All by Ryo Ofusa
デザインシステムの課題あれこれ
3randy9
2
1.9k
Other Decks in Technology
See All in Technology
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
950
20240321_生成AI時代のDevOps
kzkmaeda
2
610
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
220
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
3.1k
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
500
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
KTC_DBRE.pdf
_awache
1
290
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
450
どう買う?Azure
kuniteru
1
190
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
510
Featured
See All Featured
Clear Off the Table
cherdarchuk
82
310k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Infographics Made Easy
chrislema
237
18k
Designing for Performance
lara
601
67k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Producing Creativity
orderedlist
PRO
335
39k
How STYLIGHT went responsive
nonsquared
92
4.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
How to Ace a Technical Interview
jacobian
272
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
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