Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ウェブアクセシビリティ対応への課題と実践的な取り組み方

wadeen
September 09, 2023

 ウェブアクセシビリティ対応への課題と実践的な取り組み方

ウェブアクセシビリティ対応への課題と実践的な取り組み方
#ジャムスタックチョットデキル

wadeen

September 09, 2023
Tweet

Other Decks in Technology

Transcript

  1. ウェブアクセシビリティ対応への

    課題と実践的な取り組み方

    View Slide

  2. 自己紹介
    @wadeen_net
    わでぃん

    ‐ chot Inc. 所属(1月〜)

    ‐ Webフロントエンドエンジニア

    ‐ フルスタックにやりたい

    ‐ 鹿児島出身🌋 → 東京都在住🗼


    View Slide

  3. 今日話すこと
    フロントエンドエンジニア向けの内容

    View Slide

  4. 今日話すこと
    ✓対応できなかった場合の問題点が分かる
    ✓自分の理解度を確認することができる
    ✓コードの改善例を見てイメージができる
    ✓ウェブアクセシビリティを取り組む為のステップが分かる

    View Slide

  5. 今日話すこと
    _会社やチームで取り組むぞ!!_

    View Slide

  6. 今日話すこと
    chot社でもこれからやっていこうという段階

    View Slide

  7. フロントエンドエンジニアの責務

    View Slide

  8. フロントエンドエンジニアの責務
    「どこまでやるのか?」は別問題

    として切り分けて考える必要がある

    フロントエンドエンジニアの責務である
    ウェブアクセシビリティは

    View Slide

  9. フロントエンドエンジニアの責務
    - 出来ていること/出来ていないことが曖昧

    - 無意識にやっていることも多い

    - そもそも何をやればいいのか分からない/気付かない

    - その先にどういう問題があるのかが分からない


    View Slide

  10. ウェブアクセシビリティ向上のために
    何をしていますか?

    View Slide

  11. ウェブアクセシビリティ向上のために何をしていますか?
    日常的にやってそうなこと
    ✓セマンティクスなHTMLタグの使用
    ✓画像に代替テキスト(altタグ)を入れる
    ✓エラーメッセージの表示
    ✓レスポンシブ対応(画像切替えやフォントサイズ調整)

    View Slide

  12. ウェブアクセシビリティ向上のために何をしていますか?
    あまり出来ていなそうなこと
    ✓キーボード操作への配慮
    ✓WAI-ARIAの使用
    ✓動画や音声コンテンツの対応
    ✓スクリーンリーダー/タブ操作での確認作業

    View Slide

  13. ウェブアクセシビリティ向上のために何をしていますか?
    本当にその対応であっていますか?
    さらに・・・

    View Slide

  14. ウェブアクセシビリティ向上のために何をしていますか?
    ほとんどの原因は「知識不足」
    知っていれば工数をかけずにできることがたくさんある!!


    View Slide

  15. ウェブアクセシビリティ向上のために何をしていますか?
    1⃣ 情報感度を高くしてキャッチアップ

    2⃣ 実際に起こる問題を知る


    View Slide

  16. ウェブアクセシビリティ向上のために何をしていますか?
    1⃣ 情報感度を高くしてキャッチアップ

    2⃣ 実際に起こる問題を知る


    View Slide

  17. ウェブアクセシビリティ向上のために何をしていますか?
    ✓タブ操作ができずアクセスができない
    ✓画像の代替テキストが不適切なので内容が分からない
    ✓複雑なナビゲーションがあり使用が難しい
    ✓モバイル デバイスでの表示や操作が困難

    View Slide

  18. 事例紹介

    View Slide

  19. 事例紹介
    Case01: 官公庁案件

    Case02: コーポレートサイト


    View Slide

  20. 事例紹介
    1⃣ WAI-ARIAを適切に使う
    2⃣ スクリーンリーダー用のテキストを工夫する

    _Case01: 官公庁案件_


    View Slide

  21. 事例紹介
    ロール (Role): 要素の役割
    プロパティ (Property): 要素の特性
    ステート (State): 要素の現在の状態
    そもそもWAI-ARIA(ウェイアリア)とは・・・?
    _HTMLのセマンティクスを最大限活用し不足時のみ使用_
    一言で言うと、Webのアクセシビリティ向上のための技術のこと

    View Slide

  22. 事例紹介
    今回の要件は、
    - WCAG基準のレベルAAに準拠する
    - 一部、レベルAAAも対応可能な範囲で対応する
    _Case01: 官公庁案件_
 ❶ WAI-ARIAを適切に使う

    A:最低限 AA:推奨 AAA:最高レベル

    View Slide

  23. 事例紹介
    2.1.3 キーボード(例外なし)の達成基準
    2.4.8 現在位置の達成基準
    3.2.5 要求による状況の変化の達成基準
    レベルAAAの達成目標

    View Slide

  24. 事例紹介
    _Case01: 官公庁案件_

    `isMenuOpen`の状態を通知する
    ❶ WAI-ARIAを適切に使う


    View Slide

  25. 事例紹介
    _Case01: 官公庁案件_

    現在のページをマシンに伝える
    ❶ WAI-ARIAを適切に使う


    View Slide

  26. 事例紹介
    スクリーンリーダー用のテキストは、

    WAI-ARIAだけじゃない
    _Case01: 官公庁案件_
 ❷スクリーンリーダー用のテキスト

    ▶ 実際にスクリーンリーダーで聞いて確認する


    View Slide

  27. 事例紹介
    _Case01: 官公庁案件_

    すぐに本文に移動できるようにリンク追加
    ❷スクリーンリーダー用のテキスト


    View Slide

  28. 事例紹介
    _Case01: 官公庁案件_

    アイコンの意味を読み上げる(case by case)
    ❷スクリーンリーダー用のテキスト


    View Slide

  29. 事例紹介
    1⃣ 画像の代替テキストを適切に使う
    2⃣ タブ操作できない場合に起こる問題を解消する

    _Case02: コーポレートサイト_


    View Slide

  30. 事例紹介
    _Case02: コーポレートサイト_
 ❶ 代替テキストの使用方法

    説明が不十分
    適切な代替テキストに変更

    View Slide

  31. 事例紹介
    _Case02: コーポレートサイト_
 ❶ 代替テキストの使用方法

    view moreが何か分からない
    詳しい遷移先を読み上げる

    View Slide

  32. 事例紹介
    _Case02: コーポレートサイト_
 ❷ タブ操作の問題を解消

    ⚠タブ操作で開かない

    View Slide

  33. 事例紹介
    _Case02: コーポレートサイト_

    - 最初と最後の要素
    - Tab key
    - Shift key
    ❷ タブ操作の問題を解消


    View Slide

  34. 事例紹介
    _Case02: コーポレートサイト_

    Escapeで閉じる
    ❷ タブ操作の問題を解消

    https://chot-inc.com/

    View Slide

  35. 事例紹介
    _Case02: コーポレートサイト_
 ❷ タブ操作の問題を解消

    スクリーンリーダー/タブ操作を実際に行う
    ▶ チェックツールでは判別できないこともたくさんある


    View Slide

  36. 法律関係
    障害者差別解消法 が改正
    - 令和6年4月1日から施行

    - 今までは国や地方自治体は「義務」/ 民間は「努力義務」

    - 民間事業者も合理的配慮の提供が義務化

    *Webアクセシビリティ対応が義務化されたわけではない


    View Slide

  37. 小さく取り組んでみよう!

    View Slide

  38. 小さく取り組んでみよう!
    実際にチーム・会社でどう取り組んでいくかを考える


    View Slide

  39. 小さく取り組んでみよう!
    - アクセシビリティとは?ユーザビリティとは?
    - WAI-ARIAの説明と使い方
    - スクリーンリーダーの使い方 / 過去案件を確認してもらう
    - NotionにTipsや、aria属性のリスト化・テンプレート集を作成
    - (e.g. タブパネルやアコーディオン、ハンバーガーメニュー)
    󰳕 社内で勉強会を開いた


    View Slide

  40. 小さく取り組んでみよう!
    - axeやMarkuplintの活用
    - VSCodeやChromeの拡張機能
    - ヘッドレスUIの導入
    - 企業が公開しているチェックシート・ガイドラインの活用
    - 社内のチェックシートの作成・社内基準を明確にする
    🛠 仕組みを活用する


    View Slide

  41. 小さく取り組んでみよう!
    - チーム開発だと1人詳しくても成り立たない
    - 「ウェブアクセシビリティ」の解釈が違うことが多い
    🤝 人を巻き込もう


    View Slide

  42. 小さく取り組んでみよう!
    - チーム開発だと1人詳しくても成り立たない
    - 「ウェブアクセシビリティ」の解釈が違うことが多い
    🤝 人を巻き込もう

    前提や温度感を近づけたい


    View Slide

  43. 小さく取り組んでみよう!
    - チーム開発だと1人詳しくても成り立たない
    - 「ウェブアクセシビリティ」の解釈が違うことが多い
    - 自分も分からないで全然OK!声をあげて取り組んでみる!
    - 基礎の基礎からでいいのでみんなで話す場を作る
    - 徐々に会社やチームで取り組む(Slackのチャンネルなど)
    - 継続が難しいので広げていく人を増やす
    🤝 人を巻き込もう


    View Slide

  44. - 問題を知る
    - 知識をつける
    - 声をあげてやってみる
    まとめ

    View Slide

  45. ご静聴ありがとうございました!


    View Slide