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

by nana

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

nana 株式会社ラクス webデザイナー - 前職はSIerのSE・デザイナーアクセシビリティ試験AA担保した CMS構築とデザインを経験 ζ*＇ヮ')ζ ＜アクセシビリティチョットデキル Twitter @nana_san_ 自己紹介

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

海外のウェブアクセシビリティ対応アメリカ 1986年リハビリテーション法508条 1990年航空アクセス法（日本の航空会社も対象） 2013年障害を持つアメリカ人法（ADA）においてWebアクセシビリティへの対応を法規制で定めている世界的な動向 2016年公共機関のWebサイト等のアクセシビリティ向上に関する指令の発効に向け、EU 理事会、欧州委員会、欧州議会の合意が締結 2019年欧州アクセシビリティ法（EAA）

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

WCAG 2.0 （国内規格：JIS X 8341-3:2016と一致）達成基準の適合レベルレベルA（25項目）最低限の基準この基準を達成していないと、サイトを閲覧できない人が存在しうる。レベルAA（13項目）望ましい基準 ←公的機関はココこの基準を達成していないと、サイトの閲覧が困難な場合がある。レベルAAA（23項目）発展的な基準この基準を満たすと、よりサイトが閲覧しやすくなる。

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Google (Android) Apple (iOS)

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

コントラスト

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

キーボードだけで操作できるようにするすぐ確認できること ● タブキーを押して、視覚の順番と同様に移動できるか ● フォーカスが当たっているところが認識できるか ● カーソル・フォーカスが閉じ込められるコンテンツはないか（地図などの埋め込み要素） case1 :hoverは設定してるけど :focusや:activeはまっさらな状態 case2 input・buttonのアウトラインが非表示にされている

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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