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

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

17. 17

18. テストが書きやすくなる • マシンリーダブルにコンポーネントを作成しておくとテストが書 きやすくなる • 振る舞い駆動開発(BDD)しやすい 18 #ReactLT

19. テストが書きやすくなる 19 #ReactLT

20. テストが書きやすくなる • 状態を持っているコンポーネントの判断などWAI-ARIAを使う と解決するパターンが多くある • テストも書きやすくなってアクセシブルにもなり一石二鳥 20 #ReactLT

21. まとめ アクセシビリティを意識して開発すると • UI設計を意識してコードを書けるようになり、情報を より多くの人に届けることができる • テストが書きやすくなり開発スピードUP → より価値のあるプロダクトを提供できる！ 21

    #ReactLT

22. プロダクトをより多くの人に届けるというのを意識して コードを書いていきましょう！

23. None