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