Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webアクセシビリティを支えるための技術

402 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Webアクセシビリティを支えるための技術

  1. 1. Webアクセシビリティを 支えるための技術 PHPerKaigi 2020 弁護士ドットコム株式会社 有木 詩織 @shiori_pk
  2. 2. 目次 ● はじめに ● Webアクセシビリティ ● Webの魅力 ● 私たちに出来ること ● おわりに
  3. 3. 目次 ● はじめに ● Webアクセシビリティ ● Webの魅力 ● 私たちに出来ること ● おわりに
  4. 4. 自己紹介 有木 詩織(ありき しおり) @shiori_pk PHPer 3年目 弁護士ドットコム株式会社
  5. 5. 私たちは “Webサービス” を 提供している
  6. 6. 目次 ● はじめに ● Webアクセシビリティ ● Webアクセシビリティを支える技術 ● 私たちに出来ること ● おわりに
  7. 7. accessible = access + able アクセス可能性
  8. 8. https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
  9. 9. 情報を得る手段 分からない単語 過去のニュース 今日のニュース
  10. 10. 情報を得る手段 分からない単語 過去のニュース 今日のニュース 公式サイト 関連情報 etc...
  11. 11. “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
  12. 12. ● レベルA : 最低限の基準 ○ 環境によって全くアクセスできなくなる ● レベルAA : 望ましい基準 ○ 環境によってアクセスが困難になる場合がある ● レベルAAA : 発展的な基準 ○ 環境によってよりアクセスがしやすくなる Web Content Accessibility Guidelines https://www.w3.org/TR/WCAG21/
  13. 13. ● レベルA:1.3.3 感覚的な特徴 ○ コンテンツを理解し操作するための説明は、形、色、大 きさ、視覚的な位置、方向、又は音のような、構成要素 が持つ感覚的な特徴だけに依存していない。 ● レベルAA:2.4.7 フォーカスの可視化 ○ キーボード操作が可能なあらゆるユーザインタフェース には、フォーカスインジケータが見える操作モードがあ る。 ● レベルAAA:1.2.9 音声のみ (ライブ) : ○ ライブの音声しか含まないコンテンツに対して、それと 同等の情報を提示する、時間依存メディアの代替コンテ ンツが提供されている。 WCAGから一部抜粋
  14. 14. 目次 ● はじめに ● Webアクセシビリティ ● Webアクセシビリティを支える技術 ● 私たちに出来ること ● おわりに
  15. 15. https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
  16. 16. https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html WCAGには記載されていない
  17. 17. ハイパーテキスト
  18. 18. 複数の文書(テキスト)を相互に関連 付け、結び付ける仕組み 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
  19. 19. HTML
  20. 20. ハイパーテキストを記述するためのマ ークアップ言語のうちの一つであり、 World Wide Webで使用 https://ja.wikipedia.org/wiki/HyperText_Markup_Language
  21. 21. HTTPプロトコル
  22. 22. Webブラウザがサーバーと通信を おこなうプロトコル https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
  23. 23. World Wide Web
  24. 24. ハイパーメディア + インターネット 最も有名なハイパーメディアの実装 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
  25. 25. ● アクセスされたURLに対して、DNSを参照し てIPアドレスを知る ● IPアドレスに存在するサーバーへHTTPリクエ ストを行う ● WebサーバーからHTTPレスポンスを受け取る ● コンテンツタイプを判別する ● (text/htmlの場合)HTMLを解釈する ● スタイルを適用しレンダリングして表示する Webページを見る(WWWの仕組み)
  26. 26. これらは全てシンプルである
  27. 27. ユーザーは 何と何が繋がっているか知らない ただ知っているのは、ハイパーテキス トに紐付いたURLのみ
  28. 28. 分からない単語 過去のニュース 今日のニュース 公式サイト 関連情報 etc...
  29. 29. 目次 ● はじめに ● Webアクセシビリティ ● Webアクセシビリティを支える技術 ● 私たちに出来ること ● おわりに
  30. 30. 私たちにできること ● コントラスト比を高くする ● 画像に代替テキストを設定する ● アウトラインを消さない ● 音声を勝手に再生しない ● 適切なセマンティクスでマークアップをする ● and more… 見えない
  31. 31. サーバーサイドとして Webアクセシビリティに向き合う → 自分ごと化する
  32. 32. 適切なHTTPメソッドを選択
  33. 33. GET? POST? PUT? DELETE?
  34. 34. 適切なHTTPステータスコードを 返却
  35. 35. 401? 403? 500? 503?
  36. 36. アクセスの速度を保証
  37. 37. 最低限のアクセス速度の保証 キャッシュを用いた応答の高速化 適切な時間でのタイムアウト
  38. 38. フロントエンドを意識した DB設計
  39. 39. サービスの専門用語のマスター定義 画像の代替テキストaltの管理 データが関連を持つようなDB設計
  40. 40. and more…
  41. 41. 目次 ● はじめに ● Webアクセシビリティ ● Webアクセシビリティを支える技術 ● 私たちに出来ること ● おわりに
  42. 42. 私たちは “Webサービス” を 提供している
  43. 43. “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

×