「人」から考える「アクセシビリティ」

【teamLab Study Session ~frontend~ #2 】にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

teamLab Study Session ~frontend~ とは

チームラボのフロントエンド班がチームラボ内で定期的に実施している勉強会を、フロントエンドの技術に興味ある参加者を募集し、オンラインで配信する勉強会です。

https://teamlab.connpass.com/event/373566/

Transcript

1. © teamLab Inc. 「人」から考える 「アクセシビリティ」 teamLab Study Session ~frontend~ チームラボ　パッケージチーム　フロントエンド班 馬場 勇気
2. © teamLab Inc. 自己紹介 2
3. © teamLab Inc. 所属｜ 3 自己紹介 3 パッケージチーム フロントエンド班 フロントエンドスペシャリスト 馬場 勇気 Baba Yuki 入社｜’20年 02月 中途（6年目）
4. © teamLab Inc. 「私」と「アクセシビリティ」 4 • 元々アクセシビリティには興味があった • きっかけは、案件でアクセシビリティチェックを担 当することになったこと。 • その後、案件にフロントエンドリーダー兼アクセシ ビリティ担当として参画 • 現在は、アクセシビリティ要件を求められた他案 件での方針策定のサポートや見積もり等に参加 当時読んだアクセシビリティの本
5. © teamLab Inc. 「アクセシビリティ」ってなんで必要？ 5
6. © teamLab Inc. • SEO対策 • 法令遵守 • 企業イメージ向上 「アクセシビリティ」ってなんで必要？ 6
7. © teamLab Inc. 7 これらは並列に語られることが多いですが... 「アクセシビリティ」の 本来の「目的」は なんでしょうか？
8. © teamLab Inc. 8 答えはとてもシンプルです。 すべての「人」が サービスを使えるようにすること
9. © teamLab Inc. 「アクセシビリティ」ってなんで必要？ 9 【目的】 人のため すべての人が使えるようにする 【副産物】 企業のため SEO、法令遵守、イメージ向上など は、目的達成の結果として得られるも のです。
10. © teamLab Inc. 「障害」はどこにある？ 10
11. © teamLab Inc. 「障害」はどこにある？ 11 状況 車椅子を使っている人が、近所のカ フェに行こうとしました。 しかし、お店の入口には階段があり、 入ることができず、諦めざるを得ませ んでした。
12. © teamLab Inc. 障害の医学モデル的思考 • 階段を上れないから → 障害は「人」にあるという考え方 「障害」はどこにある？ 12
13. © teamLab Inc. 障害の医学モデル的思考 • 階段を上れないから → 障害は「人」にあるという考え方 「障害」はどこにある？ 13 障害の社会モデル的思考 • 「入口が階段だから」 • 「スロープがないから」 → 障害は「社会」にあるという考え方
14. © teamLab Inc. 14 この考えをウェブにも適用してみましょう サービスを使うことができない「人」がいる場合、 人に障害があるのではなく、サービスの側に障害がある
15. © teamLab Inc. 15 なぜ障害が生まれるのか？
16. © teamLab Inc. 問：なぜこのお店に車椅子の人が入れ ない「障害」ができてしまったか？ • 意識的に車椅子の人が入れないよ うにしたわけではない なぜ障害が生まれるのか？ 16
17. © teamLab Inc. 問：なぜこのお店は車椅子の人が入れ ないようになってしまったか？ • 意識的に車椅子の人が入れないよ うにしたわけではない • 階段があるとお店に入れない人が いるということを意識できていな かった なぜ障害が生まれるのか？ 17
18. © teamLab Inc. 問：なぜこのお店は車椅子の人が入れ ないようになってしまったか？ • 意識的に車椅子の人が入れないよ うにしたわけではない • 階段を上れない人がいるというこ とを認識できていなかったから →自分はできるを基準に考えること で、無意識的にそれ以外の状況にある 人にとっての「障害」が生まれてし まった。 なぜ障害が生まれるのか？ 18
19. © teamLab Inc. 「使えない」が意味すること 19
20. © teamLab Inc. • 現代のWebは「便利なツール」ではなく「生活インフラ」 ◦ 銀行、行政手続き、医療、買い物 ◦ 趣味の情報やイベントチケット購入 ◦ 災害情報 • 使えないことによる不利益 ◦ 機会の損失: 欲しいものが買えない、イベントに参加できない ◦ 権利の侵害: 必要な行政サービスが受けられない ◦ 生命の危機: 災害時に避難情報が得られない 「使えない」が意味すること 20
21. © teamLab Inc. 無意識に障害を作らないために 21
22. © teamLab Inc. 障害をつくらないために知っている必 要があったこと • 階段があるとお店に入れない人が いる（＝人を知る） • その人はどうなっていればお店に 入れるか（＝対策を知る） →これはWebサービスでも言えること 無意識に障害を作らないために 22
23. © teamLab Inc. 多様なユーザーを知る どんな人がいて、どんな風にサービスを利用して いるか。 そしてその利用方法に対して障害を作らないため に何が必要なのか。 これを知ることで初めて、「今の実装だと、あの 人は使えないかもしれない」という想像力が働 き、無意識の障害を減らすことができます。 無意識に障害を作らないために 23
24. © teamLab Inc. 「使える」は希望につながる 24
25. © teamLab Inc. 「自分の力で選べる」という尊厳 『わたしのeyePhone』- 三宮麻由子 幼少期に視力を失った著者がiPhoneと出会っ たことで、生活や心にどのような変化があっ たかを綴ったエッセイ。 この本の中で、iPhoneに出会う前は、「自分 の力で自由に選んで買い物をする」のが、い かに難しかったかが綴られています。 「使える」は希望につながる 25
26. © teamLab Inc. “拳の中で少し熱を持ちながら早口で一生懸命読み上げてく れる小さな存在のおかげで、私は、「本当に選ぶ」という尊厳 を取り戻し…「人のために買う」という社会的な尊厳まで授 かった。 “ — 三宮麻由子『わたしのeyePhone』 26
27. © teamLab Inc. ウェブは「場所」、「時間」の制約を取り払えるという特性がある。 この特性は、制約がある人にとっては「便利」以上の意味を持ちます。 • 移動が困難でも買い物ができる。 • 介助者の都合に関係なく、自分のタイミングで情報にアクセスできる。 「使える」は希望につながる 27
28. © teamLab Inc. 大変な思いをしないとできなかったことが、簡単にできるようになる やりたくてもできなかったことができるようになる ウェブがアクセシブルになることでこのような「希望」にも つながるということを覚えておいていただきたいです。 「使える」は希望につながる 28
29. © teamLab Inc. Webは圧倒的にアクセシブルにしやすい 29
30. © teamLab Inc. 出力 • 画面に表示する • 拡大する • 色やフォントを変える • 音声で読み上げる • 点字にする 入力 • マウスで操作する • キーボードで操作する • 音声で操作する • 視線で操作する Webはアクセシブルにしやすい 30 • ユーザーが自分が使える形に出力・入力の方法を変えることができる
31. © teamLab Inc. 出力 • 画面に表示する • 拡大する • 色やフォントを変える • 音声で読み上げる • 点字にする 入力 • マウスで操作する • キーボードで操作する • 音声で操作する • 視線で操作する Web標準に則った実装をすれば これらの出力・入力方法に合わせて 個別に実装を変える必要がない Webはアクセシブルにしやすい 31 • ユーザーが自分が使える形に出力・入力の方法を変えることができる
32. © teamLab Inc. WCAGをバイブルに 32
33. © teamLab Inc. WCAG (Web Content Accessibility Guidelines) • ウェブコンテンツを「さまざまな障害がある人でも使えるようにするた め」に作られたガイドライン。 • 世界各国の法律や公的規格のベースとしても採用されている。 • 「達成基準」という形でアクセシブルにするために必要な対応がまとめ られている。 WCAGをバイブルに 33
34. © teamLab Inc. WCAG - 解説書 対応方法についての説明と一緒に • その対応はどんな人のためになるのか • なぜその対応が必要なのか という背景まで詳細に説明されています。 WCAGを学ぶことは、必要な対応を学べると同 時に、無意識の障害をつくらないために必要な 「人」についても知ることができます。 WCAGをバイブルに 34
35. © teamLab Inc. まとめ 35
36. © teamLab Inc. • アクセシビリティの目的は、「すべての人がサービスを使えるようにするこ と」 • 障害は「人」ではなく「サービス側」にある →裏を返せば、私たちが作るサービスが整えば、「障害」をなくせるということです。 まとめ 36
37. © teamLab Inc. エンジニアの役割 アクセシビリティの「土台」を作るのは、 最終的にコードを書く私たちエンジニアです。 これができてくれば確実により多くの人がサービスを使えるようになります。 まとめ 37
38. © teamLab Inc. 画面の向こう側にいる「人」への想像力を持ち続け、 その意識を、日々のコードに少しずつでも反映していきま しょう。 そうすることで、一歩ずつ確実に、 「誰もが使えるサービス」に近づけていくことができます。 38
39. © teamLab Inc. 馬場 勇気 「人」から考える「アクセシビリティ」 チームラボ株式会社 パッケージチーム 所属 teamLab Study Session ~frontend~ ご静聴ありがとうございました！