Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウェブアクセシビリティについて
Search
nana
July 16, 2021
Education
0
6k
ウェブアクセシビリティについて
nana
July 16, 2021
Tweet
Share
Other Decks in Education
See All in Education
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
310
第1回大学院理工学系説明会|東京科学大学(Science Tokyo)
sciencetokyo
PRO
0
3.8k
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
230
2025年度春学期 統計学 第10回 分布の推測とは ー 標本調査,度数分布と確率分布 (2025. 6. 12)
akiraasano
PRO
0
140
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
290
SkimaTalk Teacher Guidelines
skimatalk
0
790k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
460
SkimaTalk Introduction for Students
skimatalk
0
380
実務プログラム
takenawa
0
6.1k
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
530
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
180
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
KATA
mclloyd
30
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Making Projects Easy
brettharned
116
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Experiences People Love
moore
142
24k
RailsConf 2023
tenderlove
30
1.1k
Unsuck your backbone
ammeep
671
58k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Transcript
ウェブアクセシビリティについて
nana 株式会社ラクス webデザイナー - 前職はSIerのSE・デザイナー アクセシビリティ試験AA担保した CMS構築とデザインを経験 ζ*'ヮ')ζ < アクセシビリティ
チョットデキル Twitter @nana_san_ 自 己 紹 介
アジェンダ • アクセシビリティとは • ウェブアクセシビリティとは • 訴訟例 • 具体的な対応策
まず アクセシビリティとは
アクセシビリティとは 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、 製品やサービスの利用しやすさという意味でも使われます。 似た意味をもつ言葉にユーザビリティがありますが、アクセシビリティは ユーザビリティより幅広い利用状況、多様な利用者を前提とします。 引用:ウェブアクセシビリティ基盤委員会 https://waic.jp/knowledge/accessibility/
ウェブアクセシビリティとは
ウェブアクセシビリティとは ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティ です。ウェブコンテンツ、より具体的にはウェブページにある情報や 機能の利用しやすさを意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況で ウェブを使うようになった今、あらゆるウェブコンテンツにとって、 ウェブアクセシビリティは必要不可欠な品質と言えます。 引用:ウェブアクセシビリティ基盤委員会 https://waic.jp/knowledge/accessibility/
ウェブアクセシビリティの対応状況
海外のウェブアクセシビリティ対応 アメリカ 1986年 リハビリテーション法508条 1990年 航空アクセス法(日本の航空会社も対象) 2013年 障害を持つアメリカ人法(ADA) においてWebアクセシビリティへの対応を 法規制で定めている
世界的な動向 2016年 公共機関のWebサイト等のアクセシ ビリティ向上に関する指令の発効に向け、EU 理事会、欧州委員会、欧州議会の合意が締結 2019年 欧州アクセシビリティ法(EAA)
None
海外の訴訟例 Netflix Hulu AamazonPimeVideo など 字幕の提供不足 ディズニー 2011年 Webサイト 原告「スクリーンリーダーでは判読
できないコンテンツ、視覚や聴覚に 障害のある人がアクセスするのが難 しい可能性のあるFlash、ビデオ、オ ーディオコンテンツを持っている」 施設 音声ガイドなどのアクセス可能な リソース不足 マクドナルド 2017年 Webサイト スクリーンリーダーで操作が不可 能。ラベルや代替テキストがない か、あるいは不正確な、画像・リ ンク・ボタンが多数あり、読み上 げソフトでの情報取得ができない 状況にある。など
障害者差別解消法 第8条第2項 事業者は、その事業を行うに当たり、障害者から現に社会的障壁の除去を必要として いる旨の意思の表明があった場合において、その実施に伴う負担が過重でないときは、 障害者の権利利益を侵害することとならないよう、当該障害者の性別、年齢及び障害 の状態に応じて、社会的障壁の除去の実施について必要かつ合理的な配慮をするよう に努めなければならない。 2016年より施行 国連が定めた「障害者の権利に関する条約」の批准に伴い制定
WCAG 2.0 (国内規格:JIS X 8341-3:2016と一致) 達成基準の適合レベル レベルA(25項目) 最低限の基準 この基準を達成していないと、サイトを閲覧できない人が存在しうる。 レベルAA(13項目)
望ましい基準 ←公的機関はココ この基準を達成していないと、サイトの閲覧が困難な場合がある。 レベルAAA(23項目) 発展的な基準 この基準を満たすと、よりサイトが閲覧しやすくなる。
空港と公的機関は大変だなぁ… そんな他人事みたいに 受け取ってる人いませんか!
あなたが携わっているサービスを より大きくしていく予定なら 様々な環境で様々な人が触るはず…!! ぜひ一考していただきたい!
意外と身近にある アクセシビリティについてご紹介
Google (Android) Apple (iOS)
Slack 「T型/P型・D型色覚推奨」 のテーマ
といっても… すぐにシステムやサイトに いろんな機能を組み込めるわけないよ …
比較的 簡単にできそう & 影響が大きいところ をご紹介します
コントラスト
コントラスト コントラストチェッカーで検索! https://colorable.jxnblk.com/fefefe/df791f → 2.98 Fail ↓ 不合格
https://colorable.jxnblk.com/fefefe/df791f → 3.02 AA Large ↓ 大きい文字の時 レベルAAに合格 コントラスト コントラストチェッカーで検索!
キーボードだけで 操作できるようにする
キーボードだけで操作できるようにする マウスなどのポインティングデバイスを使用することができない場合など、 キーボードインタフェースだけで操作しているユーザーがいます。 そのため、もしユーザーがマウスを操作できなかったとしても、 キーボードだけで同じようにその機能を操作できるようにする必要があります。 7.2.1.1 キーボード操作に関する達成基準
キーボードだけで操作できるようにする すぐ確認できること • タブキーを押して、視覚の順番と同様に移動できるか • フォーカスが当たっているところが認識できるか • カーソル・フォーカスが閉じ込められるコンテンツはないか (地図などの埋め込み要素)
キーボードだけで操作できるようにする すぐ確認できること • タブキーを押して、視覚の順番と同様に移動できるか • フォーカスが当たっているところが認識できるか • カーソル・フォーカスが閉じ込められるコンテンツはないか (地図などの埋め込み要素) case1
:hoverは設定してるけど :focusや:activeはまっさらな状態 case2 input・buttonのアウトラインが 非表示にされている
キーボードだけで操作できるようにする すぐ確認できること • タブキーを押して、視覚の順番と同様に移動できるか • フォーカスが当たっているところが認識できるか • カーソル・フォーカスが閉じ込められるコンテンツはないか (地図などの埋め込み要素)
スクリーンリーダーを考慮する
スクリーンリーダーを考慮する この画像にALTをつけるとしたら 「考え事をしている女性会社員のイラスト」 だと思いますが、 ALTが必要じゃないときもあります。
スクリーンリーダーを考慮する 最近暑くなってきましたね… 電気代が心配… Mクールのシーツなら… ※あくまで例です。↑こういう使い方をするときは、誰の発言かを記載する方が親切です… ただの装飾にすぎない画像の ALTは空白にしましょう <img src=”xxx” alt=””>
スクリーンリーダー 「心配事がある女性会社員のイラスト」 「営業をする男性会社員のイラスト」 などが文の間に入ると、聞いてる方はちょ っと大変。
\ さいごに / このLTをお聞きのみなさんが取り扱っているサービスにも 色々規模があると思いますが 障害者とか健常者とか大人子供とか関係なく いろんな人が使いやすいサイトやアプリが増えればいいなぁ と思ってこの題材にしました
\ さいごに / 【 みんなに やさしいせかい 】 になればいいなぁと思います