アクセシビリティを意識したReact開発

【READYFOR×コミューン】業務に活かせるReact LT & 座談会 資料

Transcript

1. アクセシビリティを意識した React 開発 大房 稜 2021/10/29 1
2. 自己紹介 2 READYFOR株式会社 プロダクトエンジニア /フロントエンドエンジニア 名前：大房 稜 趣味：ボカロP、DJ、ダンス ← 最近液タブ買ってインターネットお絵かきマ ンデビュー #ReactLT
3. 前提 アクセシビリティとは？ 3 #ReactLT
4. 前提 Accessibility • Access（アクセス）＋ -bility（可能性） • アクセスのしやすさ • 利用のしやすさ 4 #ReactLT
5. 前提 Accessibility • Access（アクセス）＋ -bility（可能性） • アクセスのしやすさ • 利用のしやすさ →「障害のある人がWebを使えるようにすること」を指すことではない 色々な人間が居て色々なニーズがあることを理解する(環境,言語,デバイス) 5 #ReactLT
6. 前提 アクセシビリティには2つの観点がある • ヒューマンリーダブル • マシンリーダブル 6 #ReactLT
7. 前提 今回はマシンリーダブルの観点について 7 #ReactLT
8. マシンリーダブルにしよう Webブラウザが解釈しやすいコンテンツということ • SEO対策 • アクセシビリティ対応 ◦ 音声読み上げ ◦ キーボード操作 8 #ReactLT
9. マシンリーダブルにしよう Webブラウザが解釈しやすいコンテンツということ • SEO対策 • アクセシビリティ対応 ◦ 音声読み上げ ◦ キーボード操作 9 #ReactLT
10. マシンリーダブルにしよう セマンティックなマークアップが まず大事 CSS-in-JSで宣言的なUIを作っ ているとマークアップ意識しなく なりぎみ 10 #ReactLT
11. マシンリーダブルにしよう 通常のHTMLで表現できないUIについてしっかり考える → WAI-ARIAの使用を検討しましょう 11 #ReactLT
12. WAI-ARIA（ウェイ アリア）とは WAI-ARIAはWeb Accessibility Initiative Accessible Rich Internet Applicationsの略です。 W3Cによって定められた追加 仕様で、HTMLだけでは表すことのできない構造や状態などを明 示することができます。(wiki引用) 12 #ReactLT
13. マシンリーダブルにしよう Reactドキュメント「アクセシビリティ」より 13 #ReactLT
14. マシンリーダブルにしよう UIコンポーネントを作る時、W3CのWAI-ARIA オーサリング・プラ クティスやAdobeのデザインシステムからreact-ariaやアクセシブ ルが売りのchakra-uiなどを参考にしてみましょう 14 #ReactLT
15. マシンリーダブルにしよう • StorybookでのUIコンポーネント集を管理しよう ◦ 汎用化したコンポーネントでマークアップミスを無くす、作 るUIについての設計を考えられる → WAI-ARIAを使ったUIをしっかり汎用化する 15 #ReactLT
16. マシンリーダブルにしよう • storybook-addon-a11yの活用をする ◦ コンポーネントごとにアクセシビリティチェックを表示してく れる ◦ クリティカルになりえそうな部分の早めの発見ができる 16 #ReactLT
18. テストが書きやすくなる • マシンリーダブルにコンポーネントを作成しておくとテストが書 きやすくなる • 振る舞い駆動開発(BDD)しやすい 18 #ReactLT
19. テストが書きやすくなる 19 #ReactLT
20. テストが書きやすくなる • 状態を持っているコンポーネントの判断などWAI-ARIAを使う と解決するパターンが多くある • テストも書きやすくなってアクセシブルにもなり一石二鳥 20 #ReactLT
21. まとめ アクセシビリティを意識して開発すると • UI設計を意識してコードを書けるようになり、情報を より多くの人に届けることができる • テストが書きやすくなり開発スピードUP → より価値のあるプロダクトを提供できる！ 21 #ReactLT
22. プロダクトをより多くの人に届けるというのを意識して コードを書いていきましょう！