PHPerKaigi2020の資料です。 タイトル : Webアクセシビリティを支えるための技術

1. Webアクセシビリティを
支えるための技術
PHPerKaigi 2020
弁護士ドットコム株式会社
有木 詩織
@shiori_pk

2. 目次
● はじめに
● Webアクセシビリティ
● Webの魅力
● 私たちに出来ること
● おわりに

3. 目次
● はじめに
● Webアクセシビリティ
● Webの魅力
● 私たちに出来ること
● おわりに

4. 自己紹介
有木 詩織（ありき しおり）
@shiori_pk
PHPer 3年目
弁護士ドットコム株式会社

7. 私たちは “Webサービス” を
提供している

8. 目次
● はじめに
● Webアクセシビリティ
● Webアクセシビリティを支える技術
● 私たちに出来ること
● おわりに

9. accessible = access + able
アクセス可能性

10. https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

11. 情報を得る手段
分からない単語
過去のニュース
今日のニュース

12. 情報を得る手段
分からない単語
過去のニュース
今日のニュース
公式サイト
関連情報
etc...

13. “The power of the Web is in its universality.
Access by everyone regardless of disability is an
essential aspect.”（Tim Berners-Lee）
Webの力はその普遍性にあります。障害の有無
にかかわらず誰もがアクセスできるというのが
Webの本質的な側面なのです。
https://www.w3.org/standards/webdesign/accessibility

14. ● レベルA : 最低限の基準
○ 環境によって全くアクセスできなくなる
● レベルAA : 望ましい基準
○ 環境によってアクセスが困難になる場合がある
● レベルAAA : 発展的な基準
○ 環境によってよりアクセスがしやすくなる
Web Content Accessibility Guidelines
https://www.w3.org/TR/WCAG21/

15. ● レベルA：1.3.3 感覚的な特徴
○ コンテンツを理解し操作するための説明は、形、色、大
きさ、視覚的な位置、方向、又は音のような、構成要素
が持つ感覚的な特徴だけに依存していない。
● レベルAA：2.4.7 フォーカスの可視化
○ キーボード操作が可能なあらゆるユーザインタフェース
には、フォーカスインジケータが見える操作モードがあ
る。
● レベルAAA：1.2.9 音声のみ (ライブ) :
○ ライブの音声しか含まないコンテンツに対して、それと
同等の情報を提示する、時間依存メディアの代替コンテ
ンツが提供されている。
WCAGから一部抜粋

16. 目次
● はじめに
● Webアクセシビリティ
● Webアクセシビリティを支える技術
● 私たちに出来ること
● おわりに

17. https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

18. https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
WCAGには記載されていない

19. ハイパーテキスト

20. 複数の文書（テキスト）を相互に関連
付け、結び付ける仕組み
https://ja.wikipedia.org/wiki/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%86%E3%82%AD
%E3%82%B9%E3%83%88

21. HTML

22. ハイパーテキストを記述するためのマ
ークアップ言語のうちの一つであり、
World Wide Webで使用
https://ja.wikipedia.org/wiki/HyperText_Markup_Language

23. HTTPプロトコル

24. Webブラウザがサーバーと通信を
おこなうプロトコル
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol

25. World Wide Web

26. ハイパーメディア + インターネット
最も有名なハイパーメディアの実装
https://ja.wikipedia.org/wiki/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%86%E3%82%AD%E3%82%B9%E3%
83%88

27. ● アクセスされたURLに対して、DNSを参照し
てIPアドレスを知る
● IPアドレスに存在するサーバーへHTTPリクエ
ストを行う
● WebサーバーからHTTPレスポンスを受け取る
● コンテンツタイプを判別する
● （text/htmlの場合）HTMLを解釈する
● スタイルを適用しレンダリングして表示する
Webページを見る（WWWの仕組み）

28. これらは全てシンプルである

29. ユーザーは
何と何が繋がっているか知らない
ただ知っているのは、ハイパーテキス
トに紐付いたURLのみ

30. 分からない単語
過去のニュース
今日のニュース
公式サイト
関連情報
etc...

31. 目次
● はじめに
● Webアクセシビリティ
● Webアクセシビリティを支える技術
● 私たちに出来ること
● おわりに

32. 私たちにできること
● コントラスト比を高くする
● 画像に代替テキストを設定する
● アウトラインを消さない
● 音声を勝手に再生しない
● 適切なセマンティクスでマークアップをする
● and more…
見えない

33. サーバーサイドとして
Webアクセシビリティに向き合う
→ 自分ごと化する

34. 適切なHTTPメソッドを選択

35. GET? POST?
PUT? DELETE?

36. 適切なHTTPステータスコードを
返却

37. 401? 403?
500? 503?

38. アクセスの速度を保証

39. 最低限のアクセス速度の保証
キャッシュを用いた応答の高速化
適切な時間でのタイムアウト

40. フロントエンドを意識した
DB設計

41. サービスの専門用語のマスター定義
画像の代替テキストaltの管理
データが関連を持つようなDB設計

42. and more…

43. 目次
● はじめに
● Webアクセシビリティ
● Webアクセシビリティを支える技術
● 私たちに出来ること
● おわりに

44. 私たちは “Webサービス” を
提供している

45. “The power of the Web is in its universality.
Access by everyone regardless of disability is an
essential aspect.”（Tim Berners-Lee）
Webの力はその普遍性にあります。障害の有無
にかかわらず誰もがアクセスできるというのが
Webの本質的な側面なのです。
https://www.w3.org/standards/webdesign/accessibility