Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
FinalObject_1_hello!_a11y_ver_phper
- 1. はじめまして！ Webアクセシビリティ -PHPer編- 2019/03/31 PHPer Kaigi 2019 エキサイト株式会社 Life & Wellness事業部 古賀詩織 @shiori_pk
- 3. はじめまして！ Webアクセシビリティ -PHPer編- 全サーバーサイドエンジニア編 2019/03/31 PHPer Kaigi 2019 エキサイト株式会社 Life & Wellness事業部 古賀詩織 @shiori_pk
- 4. • 古賀 詩織 • BEAR歴2年目 • Life & Wellness 事業部 • エキサイト婚活 • エキサイトフレンズ • エキサイト電話占い • エキサイトお悩み相談 • 趣味 : 空手 自己紹介
- 6. 障がい者のための対応
- 7. 高齢者のための対応
- 8. 🙅
- 10. Webアクセシビリティとは accessible = “access” + “able” アクセスの可能性
- 13. なんのために取り組むの？
- 14. 何故、私たちはWebアクセシビリティに取り組むのか • Webサイトにアクセスすることができる人数を増やすため • 様々な異なるデバイスで利用してもアクセスを可能にするため • SEOのため • ユーザービリティの向上、改善のため • ユーザー体験の向上のため
- 15. どうやって取り組むの？
- 16. どうやって取り組むの？ Web Content Accessibility Guidelines 2.1 •レベルA : 最低限の基準 • 環境によって全くアクセスできなくなる •レベルAA : 望ましい基準 • 環境によってアクセスが困難になる場合がある •レベルAAA : 発展的な基準 • 環境によってよりアクセスがしやすくなる
- 17. フロントエンドの役割
- 18. フロントエンドの役割 • Webアクセシビリティを意識したマークアップをする • 適切なセマンティクスでマークアップする • アクセスを阻害するような動きをするものを作成しない • WAI-ARIAの活用
- 21. 例 : 画像コンテンツをメインとするWebサービス xxxx円 xoxo円 xxoo円 oxox円 çç ○○ショッピング トップ > レディース { "product_id" : 190331, "product_img": "https://img.xxx/190331.png", "price": 2980, "created_at" : "19-03-31" }
- 22. 例 : 画像コンテンツをメインとする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", }
- 23. 例 : 画像コンテンツをメインとする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" "春先にピッタリの薄手素材。……” }
Notas del editor
- 古賀詩織です。 業務では主にBEAR.SaturdayやBEAR.Sundayなどのフレームワークを使用しています。
- 私たちが普段生活をする上で、Webにアクセスしているようにできなかったらどうしますか？
- アクセスする対象が同じでも全員がアクセスできるとは限らないですよね？
- ユーザービリティ : 特定のユーザーにとっての使いやすさ アクセシビリティ : より多くの人が使えるかどうか 使いやすさがゼロ = そもそも使えない ので重なる部分もある
- 私たちがWebサービスを提供する以上、
- テキストでしかアクセスができないもの CSSに依存しないコンテンツ設計 デバイスに依存したUIにしない
- フロントのことをどれだけ知って設計をしていますか。 渡しているAPIレスポンスが、どのように使用されてどの部分で必要かどうかを確実に意識して設計していますか？ 設計していますよね、もちろん。 だけど、本当はもっとサーバーサイドエンジニアが担うべきことがあるかもしれない。
- APIで返す
- 究極的なアクセス → インターネット環境がなくてもアクセスが可能にする HTTPキャッシュ 高齢者、障がい者だけでなく、対象は全員