Save 37% off PRO during our Black Friday Sale! »

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

107c6e45fabd04b9be1133cfc32a90ef?s=47 Ryo Ofusa
October 29, 2021

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

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

107c6e45fabd04b9be1133cfc32a90ef?s=128

Ryo Ofusa

October 29, 2021
Tweet

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