PHPerKaigi_2019_hello!_a11y_ver_phper
- 4. • 古賀 詩織（@shiori_pk） • PHPer歴 2年目 • エキサイト株式会社 • 趣味 : 空手 自己紹介
- 6. 障がい者のための対応
- 7. 高齢者のための対応
- 8. 🙅
- 10. accessible = “access” + “able” アクセスの可能性 Webアクセシビリティとは
- 11. フロントエンドの役割
- 12. • Webアクセシビリティを意識したマークアップ • 適切なセマンティクスでマークアップ • アクセスを阻害しないような動きを意識 • WAI-ARIAの活用 フロントエンドの役割
- 15. 2,980円 xoxo円 xxoo円 oxox円 ○○ショッピング トップ > レディース { "product_id" : 190331, "product_img" : "https://.../190331.png", "price" : 2980, "created_at" : "19-03-31", } 例 : 画像コンテンツをメインとするWebサービス
- 16. 2,980円 xoxo円 xxoo円 oxox円 ○○ショッピング トップ > レディース { "product_id": 190331, "product_img" : "https://.../190331.png", "price" : 2980, "created_at": "19-03-31", "product_name" : "ピンクチューリップ長袖Tシャツ", "size" : "M", } 例 : 画像コンテンツをメインとするWebサービス
- 17. ピンクチューリップ長袖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" "春先にピッタリの薄手素材。……” } 例 : 画像コンテンツをメインとするWebサービス
Editor's Notes
- #5: 改めまして、エキサイト株式会社 古賀詩織と申します。 ペチパー歴丸2年くらいです。 趣味で空手をやっています
- #6: みなさん、Webアクセシビリティという言葉はご存知ですか？ 今日はWebアクセシビリティについてみんなで考えていきましょう。
- #7: それは、障害者のための対応でしょうか？
- #8: または、高齢者のための対応でしょうか？
- #9: 答えはNOです。
- #10: なぜなら私たち、が普段生活をする上で、Webにアクセスしているように出来なかったらどうしますか？ ありとあらゆる小さなきっかけで、Webにアクセスすることができなくなることがよくあります。
- #11: Webアクセシビリティとは、アクセス+able → アクセスの可能性のことを指します。 なにか同じWebサイトにアクセスするにしても、全員がアクセスできるとは限らないですよね？
- #12: では、なんのために取り組むのでしょうか？
- #13: 私たちがWebサービスを提供する以上、ターゲットとしているユーザー全員にアクセスができるようにして提供をしなければなりません。 アクセス可能な人数を増やす以外にも様々な理由があります。
- #14: Webアクセシビリティへはフロントエンドエンジニアが対応することが多くあります。
- #16: <3分30秒> 一見サーバーサイドエンジニアとして出来そうなことはないかもしれません。 ですが私たちにできることは何か？ サーバーサイドエンジニアとしてWebアクセシビリティに向き合って見ましょう。
- #17: 普段、フロントのことをどれだけ知って設計をしていますか。 渡しているAPIレスポンスが、どのように使用されてどの部分で必要かどうかを確実に意識して設計していますか？ 設計していますよね、もちろん。 だけど、本当はもっとサーバーサイドエンジニアが担うべきことがあるかもしれない。
- #18: よくありそうなECサイトを例に見てみましょう
- #21: 究極的なアクセス → 昨日郡山さんも仰っていましたが インターネット環境がなくてもアクセスを可能にする クライアントのHTTPキャッシュ または、Webサイトを描画する速度がアクセスの可能性を上げるかもしれません。 私たちも是非Webアクセシビリティを意識して開発をしていきましょう！