FinalObject_1_hello!_a11y_ver_phper

はじめまして！
Webアクセシビリティ
-PHPer編-
2019/03/31 PHPer Kaigi 2019
エキサイト株式会社
Life & Wellness事業部
古賀詩織 @shiori_pk

はじめまして！
-PHPer編-
全サーバーサイドエンジニア編
2019/03/31 PHPer Kaigi 2019
エキサイト株式会社
Life & Wellness事業部
古賀詩織 @shiori_pk

• 古賀詩織
• BEAR歴2年目
• Life & Wellness 事業部
• エキサイト婚活
• エキサイトフレンズ
• エキサイト電話占い
• エキサイトお悩み相談
• 趣味 : 空手
自己紹介

ってなんだろう🤔

障がい者のための対応

もし、利き手を骨折したら？
もし、マウスの充電がなくなったら？
もし、太陽直下で画面が見にくかったら？

Webアクセシビリティとは
accessible = “access” + “able”
アクセスの可能性

「ユーザービリティ」との違い
ユーザービリティ
アクセシビリティ

https://www.slideshare.net/rikiha/web-76075793

なんのために取り組むの？

何故、私たちはWebアクセシビリティに取り組むのか
• Webサイトにアクセスすることができる人数を増やすため
• 様々な異なるデバイスで利用してもアクセスを可能にするため
• SEOのため
• ユーザービリティの向上、改善のため
• ユーザー体験の向上のため

どうやって取り組むの？

どうやって取り組むの？
Web Content Accessibility Guidelines 2.1
•レベルA : 最低限の基準
• 環境によって全くアクセスできなくなる
•レベルAA : 望ましい基準
• 環境によってアクセスが困難になる場合がある
•レベルAAA : 発展的な基準
• 環境によってよりアクセスがしやすくなる

フロントエンドの役割

フロントエンドの役割
• Webアクセシビリティを意識したマークアップをする
• 適切なセマンティクスでマークアップする
• アクセスを阻害するような動きをするものを作成しない
• WAI-ARIAの活用

サーバーサイドとして
Webアクセシビリティに向き合う

フロントエンドのことを
どれだけ意識して
API設計をしていますか？

例 : 画像コンテンツをメインとするWebサービス
xxxx円
xoxo円
xxoo円
oxox円
çç
○○ショッピング
トップ > レディース
{
"product_id" : 190331,
"product_img": "https://img.xxx/190331.png",
"price": 2980,
"created_at" : "19-03-31"
}

xxxx円
xoxo円
xxoo円
oxox円
çç
トップ > レディース
{
"product_img": "https://.../190331.png",
"price": 2980,
"created_at" : "19-03-31",
"product_name": "ピンクチューリップ長袖Tシャツ",
"size" :"M",
}

ピンクチューリップ長袖Tシャツ
Mサイズ在庫13点 2,980円
春先にピッタリの薄手素材。
シンプルなロングスカートと合わせたり
デニムに合わせても相性バツグン。
トップ > レディース > ピンクチューリップ長袖Tシャツ
{
"product_img": "https://.../190331.png",
"price": 2980,
"created_at" : "19-03-31",
"product_name": "ピンクチューリップ長袖Tシャツ",
"size" :"M",
"stock" : 13,
"description" "春先にピッタリの薄手素材。……”
}

Webアクセシビリティを考える😤

Webアクセシビリティの可能性😤

FinalObject_1_hello!_a11y_ver_phper

More Related Content

Featured (20)

FinalObject_1_hello!_a11y_ver_phper

Editor's Notes