ウェブアクセシビリティについて

Transcript

1. ウェブアクセシビリティについて

2. nana 株式会社ラクス webデザイナー - 前職はSIerのSE・デザイナー アクセシビリティ試験AA担保した CMS構築とデザインを経験 ζ*＇ヮ')ζ ＜ アクセシビリティ

   チョットデキル Twitter @nana_san_ 自 己 紹 介

3. アジェンダ • アクセシビリティとは • ウェブアクセシビリティとは • 訴訟例 • 具体的な対応策

4. まず アクセシビリティとは

5. アクセシビリティとは 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、 製品やサービスの利用しやすさという意味でも使われます。 似た意味をもつ言葉にユーザビリティがありますが、アクセシビリティは ユーザビリティより幅広い利用状況、多様な利用者を前提とします。 引用：ウェブアクセシビリティ基盤委員会 https://waic.jp/knowledge/accessibility/

6. ウェブアクセシビリティとは

7. ウェブアクセシビリティとは ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティ です。ウェブコンテンツ、より具体的にはウェブページにある情報や 機能の利用しやすさを意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況で ウェブを使うようになった今、あらゆるウェブコンテンツにとって、 ウェブアクセシビリティは必要不可欠な品質と言えます。 引用：ウェブアクセシビリティ基盤委員会 https://waic.jp/knowledge/accessibility/

8. ウェブアクセシビリティの対応状況

9. 海外のウェブアクセシビリティ対応 アメリカ 1986年 リハビリテーション法508条 1990年 航空アクセス法（日本の航空会社も対象） 2013年 障害を持つアメリカ人法（ADA） においてWebアクセシビリティへの対応を 法規制で定めている

   世界的な動向 2016年 公共機関のWebサイト等のアクセシ ビリティ向上に関する指令の発効に向け、EU 理事会、欧州委員会、欧州議会の合意が締結 2019年 欧州アクセシビリティ法（EAA）
10. None

11. 海外の訴訟例 Netflix Hulu AamazonPimeVideo など 字幕の提供不足 ディズニー 2011年 Webサイト 原告「スクリーンリーダーでは判読

    できないコンテンツ、視覚や聴覚に 障害のある人がアクセスするのが難 しい可能性のあるFlash、ビデオ、オ ーディオコンテンツを持っている」 施設 音声ガイドなどのアクセス可能な リソース不足 マクドナルド 2017年 Webサイト スクリーンリーダーで操作が不可 能。ラベルや代替テキストがない か、あるいは不正確な、画像・リ ンク・ボタンが多数あり、読み上 げソフトでの情報取得ができない 状況にある。など

12. 障害者差別解消法 第8条第2項 事業者は、その事業を行うに当たり、障害者から現に社会的障壁の除去を必要として いる旨の意思の表明があった場合において、その実施に伴う負担が過重でないときは、 障害者の権利利益を侵害することとならないよう、当該障害者の性別、年齢及び障害 の状態に応じて、社会的障壁の除去の実施について必要かつ合理的な配慮をするよう に努めなければならない。 2016年より施行 国連が定めた「障害者の権利に関する条約」の批准に伴い制定

13. WCAG 2.0 （国内規格：JIS X 8341-3:2016と一致） 達成基準の適合レベル レベルA（25項目） 最低限の基準 この基準を達成していないと、サイトを閲覧できない人が存在しうる。 レベルAA（13項目）

    望ましい基準 ←公的機関はココ この基準を達成していないと、サイトの閲覧が困難な場合がある。 レベルAAA（23項目） 発展的な基準 この基準を満たすと、よりサイトが閲覧しやすくなる。

14. 空港と公的機関は大変だなぁ… そんな他人事みたいに 受け取ってる人いませんか！

15. あなたが携わっているサービスを より大きくしていく予定なら 様々な環境で様々な人が触るはず…！！ ぜひ一考していただきたい！

16. 意外と身近にある アクセシビリティについてご紹介

17. Google (Android) Apple (iOS)

18. Slack 「T型/P型・D型色覚推奨」 のテーマ

19. といっても… すぐにシステムやサイトに いろんな機能を組み込めるわけないよ …

20. 比較的 簡単にできそう ＆ 影響が大きいところ をご紹介します

21. コントラスト

22. コントラスト コントラストチェッカーで検索！ https://colorable.jxnblk.com/fefefe/df791f → 2.98 Fail ↓ 不合格

23. https://colorable.jxnblk.com/fefefe/df791f → 3.02 AA Large ↓ 大きい文字の時 レベルAAに合格 コントラスト コントラストチェッカーで検索！

24. キーボードだけで 操作できるようにする

25. キーボードだけで操作できるようにする マウスなどのポインティングデバイスを使用することができない場合など、 キーボードインタフェースだけで操作しているユーザーがいます。 そのため、もしユーザーがマウスを操作できなかったとしても、 キーボードだけで同じようにその機能を操作できるようにする必要があります。 7.2.1.1 キーボード操作に関する達成基準

26. キーボードだけで操作できるようにする すぐ確認できること • タブキーを押して、視覚の順番と同様に移動できるか • フォーカスが当たっているところが認識できるか • カーソル・フォーカスが閉じ込められるコンテンツはないか （地図などの埋め込み要素）

27. キーボードだけで操作できるようにする すぐ確認できること • タブキーを押して、視覚の順番と同様に移動できるか • フォーカスが当たっているところが認識できるか • カーソル・フォーカスが閉じ込められるコンテンツはないか （地図などの埋め込み要素） case1

    :hoverは設定してるけど :focusや:activeはまっさらな状態 case2 input・buttonのアウトラインが 非表示にされている

28. キーボードだけで操作できるようにする すぐ確認できること • タブキーを押して、視覚の順番と同様に移動できるか • フォーカスが当たっているところが認識できるか • カーソル・フォーカスが閉じ込められるコンテンツはないか （地図などの埋め込み要素）

29. スクリーンリーダーを考慮する

30. スクリーンリーダーを考慮する この画像にALTをつけるとしたら 「考え事をしている女性会社員のイラスト」 だと思いますが、 ALTが必要じゃないときもあります。

31. スクリーンリーダーを考慮する 最近暑くなってきましたね… 電気代が心配… Mクールのシーツなら… ※あくまで例です。↑こういう使い方をするときは、誰の発言かを記載する方が親切です… ただの装飾にすぎない画像の ALTは空白にしましょう <img src=”xxx” alt=””>

    スクリーンリーダー 「心配事がある女性会社員のイラスト」 「営業をする男性会社員のイラスト」 などが文の間に入ると、聞いてる方はちょ っと大変。

32. ＼ さいごに ／ このLTをお聞きのみなさんが取り扱っているサービスにも 色々規模があると思いますが 障害者とか健常者とか大人子供とか関係なく いろんな人が使いやすいサイトやアプリが増えればいいなぁ と思ってこの題材にしました

33. ＼ さいごに ／ 【 みんなに やさしいせかい 】 になればいいなぁと思います