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

必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ

必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ

株式会社出前館

June 28, 2023
Tweet

More Decks by 株式会社出前館

Other Decks in Technology

Transcript

  1. 必見!
    Web アクセシビリティの重要性とは?
    知らないと恥ずかしい!?
    その理由と対策法まとめ

    View full-size slide

  2. 自己紹介
    白石 泰己 (Taiki Shiraishi)
    🏢: 株式会社出前館
    : フロントエンドグループマネージャーおよび
    コンシューマー向けWebフロントエンド開発
    ❤: UI に関わるのが好きです

    View full-size slide

  3. 今日の目的
    Web アクセシビリティって何? 🤔
    Web アクセシビリティちょっとわかる💡

    View full-size slide

  4. アジェンダ
    • Web アクセシビリティとは
    • なぜ Web アクセシビリティが重要なのか
    • 具体的にいつ使われているのか
    • Web アクセシビリティって何からすれば?
    • 休憩
    • 実践
    前半
    後半

    View full-size slide

  5. Web アクセシビリティとは
    web サイトの情報への到達しやすさを表します。
    年齢や障害者を問わず、また利用環境に関わらず、
    全ての人が Web サイトのコンテンツを利用可能なように設計・開発することです。
    Web アクセシビリティを向上することで、みんなが Web サイトが使いやすくなります!
    accessibility=access(到達、入手)+~ibility(ability)(~できる性質)
    出典:総務省|東海総合通信局|ウェブアクセシビリティとは?

    View full-size slide

  6. なぜ Web アクセシビリティが重要なのか
    1.Web 利用者の増加
    2.端末の多様性
    3.法整備

    View full-size slide

  7. なぜ Web アクセシビリティが重要なのか
    1. Web 利用者の増加

    View full-size slide

  8. なぜ Web アクセシビリティが重要なのか
    身体的障害を抱えている方は
    日本に 437 万人、人口の約 3.4 %
    世界では 10 億人、人口の約 15 %
    1. Web 利用者の増加
    多くの人がアクセス可能であるメリットがある Web で
    これだけ多くの人たちへ背を向けて Web 開発はできな
    い!

    View full-size slide

  9. なぜ Web アクセシビリティが重要なのか
    2. 端末の多様性
    パソコン
    スマートフォン
    VR・AR・MR
    ゲーム機
    カーナビ

    View full-size slide

  10. なぜ Web アクセシビリティが重要なのか
    障害者差別解消法
    3. 法整備
    障害のある人もない人も、互いにその人らしさを認め合いながら共に生きる社会(共生社会)を実現
    出典:リーフレット「令和6年4月1日から合理的配慮の提供が義務化されます!」 - 内閣府
    この法律が令和 6 年 (2024 年) 4 月 1 日から努力義務から法的義務へ変わります!
    これを機に Web アクセシビリティへの取り組みをはじめませんか?

    View full-size slide

  11. 具体的にいつ使われているの?
    画面が見えづらい場合(音声読み上げ、点字ディスプレイ、画面の拡大)
    • 太陽光の強い屋外(現場でのタブレット操作)
    • 画面が見えない時の読み上げ(amazon audible、kindle の音声読み上げ)

    View full-size slide

  12. 具体的にいつ使われているの?
    耳が聞こえない場合
    • 音が出せない環境での動画閲覧(YouTube 字幕)

    View full-size slide

  13. 具体的にいつ使われているの?
    運動機能の問題でマウスが使えない場合(キーボード操作、補助機器、音声入力・操作)
    • 利き腕を怪我をしてしまった
    • 片手が塞がった状況での操作
    • キーボードショートカット

    View full-size slide

  14. 具体的にいつ使われているの?
    Web だけじゃなくてゲーム業界もアクセシビリティに取り組んでます!

    View full-size slide

  15. アクセシビリティというのは身近なものなのです
    皆様も自分事として自分や家族が Web を⾧く快適に
    使っていけるんだろうかということを考えてみてほしいです。

    View full-size slide

  16. Web アクセシビリティって何からすれば?
    1.ガイドラインの知識
    2.ツールの知識
    3.実装の知識

    View full-size slide

  17. ガイドラインの知識
    W3C(World Wide Web Consortium)から
    ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)
    という指針が出されています。

    View full-size slide

  18. ガイドラインの知識
    知覚可能
    ユーザーは、1 つ以上の感覚を使って何らかの方法でそれを知覚できなければなりません。
    操作可能
    ユーザーは、UI 要素を制御できなければなりません(例えば、ボタンは、マウス、キーボー
    ド、音声コマンドなど、何らかの方法でクリック可能でなければならない)。
    理解可能
    コンテンツはそのユーザーにとって理解可能でなければなりません。
    堅牢
    コンテンツは、現在および将来にわたって、さまざまなブラウザで機能する、広く採用され
    ているウェブ標準を使用して開発する必要があります。

    View full-size slide

  19. ツールの知識
    Google Chrome
    • devtools のアクセシビリティパネル
    • Lighthouse
    フリーのスクリーンリーダー
    • NVDA (Windows)
    • Voice Over(Mac, iOS)
    • talkback(Android)

    View full-size slide

  20. ツールの知識
    フルページアクセシビリティツリーが確認できる機能
    Google Chrome
    name: このものをどのように参照することができるか
    description: 名前に何かを追加したいとすれば、この要素をどのように説明するか
    role: どのような種類のものなのか
    state: 状態があるかどうか

    View full-size slide

  21. ツールの知識
    Lighthouse。Web ページのパフォーマンス、アクセシビリティ、SEO などを計測できるツール
    Google Chrome

    View full-size slide

  22. ツールの知識
    Voice Over - Mac (command[⌘] + F5)
    スクリーンリーダー

    View full-size slide

  23. 実践
    https://stackblitz.com/edit/stackblitz-starters-kfffqm?file=pages%2Findex.js
    続きは stackblirz で

    View full-size slide