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.

FinalObject_1_hello!_a11y_ver_phper

85 views

Published on

3月27日のFinal Object#1にて発表した資料です。
3月31日のPHPerKaigi 2019のLTではなく10分程度のトークをした内容になっています。

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

FinalObject_1_hello!_a11y_ver_phper

  1. 1. はじめまして! Webアクセシビリティ -PHPer編- 2019/03/31 PHPer Kaigi 2019 エキサイト株式会社 Life & Wellness事業部 古賀詩織 @shiori_pk
  2. 2. はじめまして! Webアクセシビリティ -PHPer編- 全サーバーサイドエンジニア編 2019/03/31 PHPer Kaigi 2019 エキサイト株式会社 Life & Wellness事業部 古賀詩織 @shiori_pk
  3. 3. • 古賀 詩織 • BEAR歴2年目 • Life & Wellness 事業部 • エキサイト婚活 • エキサイトフレンズ • エキサイト電話占い • エキサイトお悩み相談 • 趣味 : 空手 自己紹介
  4. 4. Webアクセシビリティ ってなんだろう🤔
  5. 5. 障がい者のための対応
  6. 6. 高齢者のための対応
  7. 7. 🙅
  8. 8. もし、利き手を骨折したら? もし、マウスの充電がなくなったら? もし、太陽直下で画面が見にくかったら?
  9. 9. Webアクセシビリティとは accessible = “access” + “able” アクセスの可能性
  10. 10. 「ユーザービリティ」との違い ユーザービリティ アクセシビリティ
  11. 11. https://www.slideshare.net/rikiha/web-76075793
  12. 12. なんのために取り組むの?
  13. 13. 何故、私たちはWebアクセシビリティに取り組むのか • Webサイトにアクセスすることができる人数を増やすため • 様々な異なるデバイスで利用してもアクセスを可能にするため • SEOのため • ユーザービリティの向上、改善のため • ユーザー体験の向上のため
  14. 14. どうやって取り組むの?
  15. 15. どうやって取り組むの? Web Content Accessibility Guidelines 2.1 •レベルA : 最低限の基準 • 環境によって全くアクセスできなくなる •レベルAA : 望ましい基準 • 環境によってアクセスが困難になる場合がある •レベルAAA : 発展的な基準 • 環境によってよりアクセスがしやすくなる
  16. 16. フロントエンドの役割
  17. 17. フロントエンドの役割 • Webアクセシビリティを意識したマークアップをする • 適切なセマンティクスでマークアップする • アクセスを阻害するような動きをするものを作成しない • WAI-ARIAの活用
  18. 18. サーバーサイドとして Webアクセシビリティに向き合う
  19. 19. フロントエンドのことを どれだけ意識して API設計をしていますか?
  20. 20. 例 : 画像コンテンツをメインとするWebサービス xxxx円 xoxo円 xxoo円 oxox円 çç ○○ショッピング トップ > レディース { "product_id" : 190331, "product_img": "https://img.xxx/190331.png", "price": 2980, "created_at" : "19-03-31" }
  21. 21. 例 : 画像コンテンツをメインとするWebサービス xxxx円 xoxo円 xxoo円 oxox円 çç ○○ショッピング トップ > レディース { "product_id" : 190331, "product_img": "https://.../190331.png", "price": 2980, "created_at" : "19-03-31", "product_name": "ピンクチューリップ長袖Tシャツ", "size" :"M", }
  22. 22. 例 : 画像コンテンツをメインとするWebサービス ピンクチューリップ長袖Tシャツ Mサイズ 在庫13点 2,980円 春先にピッタリの薄手素材。 シンプルなロングスカートと合わせたり デニムに合わせても相性バツグン。 ○○ショッピング トップ > レディース > ピンクチューリップ長袖Tシャツ { "product_id" : 190331, "product_img": "https://.../190331.png", "price": 2980, "created_at" : "19-03-31", "product_name": "ピンクチューリップ長袖Tシャツ", "size" :"M", "stock" : 13, "description" "春先にピッタリの薄手素材。……” }
  23. 23. サーバーサイドとして Webアクセシビリティを考える😤
  24. 24. サーバーサイドとして Webアクセシビリティの可能性😤

×