Download - 実はできているWebアクセシビリティ 007
![Page 1: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/1.jpg)
実はできている!?Webアクセシビリティ
![Page 2: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/2.jpg)
注意事項
会場は禁煙です。喫煙所が地下一階にありますのでご利用ください。
ハッシュタグは#a11ybooks となります。
イベントの模様は自由に撮影いただき、ブログやSNS等で拡散いただいて構いません(むしろお願いします)。主催者も、公式Facebookページ用に写真撮影をいたします(ご了承ください)
スライドの公開は主催者よりSNSなどでご案内します。
2
![Page 3: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/3.jpg)
本日の流れ
自己紹介
アクセシビリティとは?
アクセシビリティだと思っていたが……?
気づかないうちにアクセシビリティを確保していた!
3
![Page 4: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/4.jpg)
自己紹介
4
![Page 5: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/5.jpg)
BA
5
![Page 6: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/6.jpg)
ウェブアクセシビリティ基盤委員会(WAIC)
6
![Page 7: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/7.jpg)
デザイニングWebアクセシビリティ
7
![Page 8: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/8.jpg)
アクセシビリティとは?
![Page 9: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/9.jpg)
アクセシビリティとは
さまざまな利用者がさまざまな環境でアクセス可能であること 情報を認識して理解できる
さまざまな選択肢が提供されている
自分に合った形で利用できる
9
![Page 10: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/10.jpg)
さまざまな環境
10
![Page 11: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/11.jpg)
ビジュアルブラウザ (Firefox)
11
![Page 12: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/12.jpg)
テキストブラウザ (w3m)
12
![Page 13: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/13.jpg)
ダウンローダー (SiteSucker)
13
![Page 14: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/14.jpg)
クローラー (Googlebot)
14
![Page 15: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/15.jpg)
ハイコントラストモード
15
![Page 16: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/16.jpg)
ハイコントラストモード
16
![Page 17: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/17.jpg)
拡大ツール (Windows拡大鏡)
17
![Page 18: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/18.jpg)
スクリーンリーダー (NVDA)
18
![Page 19: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/19.jpg)
スクリーンリーダー (VoiceOver)
19
![Page 20: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/20.jpg)
代替マウス
20
![Page 21: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/21.jpg)
点字ディスプレイ
21
![Page 22: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/22.jpg)
視線入力装置
22
![Page 23: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/23.jpg)
アクセシビリティだと思っていたが……?
![Page 24: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/24.jpg)
アクセシビリティに配慮
と言われたとき、何を思い浮かべますか?
アクセシビリティに配慮したサイトとは?
24
![Page 25: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/25.jpg)
福島県大野城市
25
![Page 26: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/26.jpg)
福島県大野城市
26
![Page 27: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/27.jpg)
文字サイズ変更ボタン・色反転ボタン
27
![Page 28: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/28.jpg)
東京都西東京市
28
![Page 29: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/29.jpg)
東京都西東京市
29
![Page 30: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/30.jpg)
「本文へ」リンク
30
![Page 31: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/31.jpg)
東京オリンピック・パラリンピック競技大会組織委員会
31
![Page 32: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/32.jpg)
東京オリンピック・パラリンピック競技大会組織委員会
32
![Page 33: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/33.jpg)
カルーセル停止 / 再生ボタン
33
![Page 34: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/34.jpg)
どう思われますか?
34
![Page 35: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/35.jpg)
大変そう?
コストがかかりそう?
デザインに大きな影響が出そう?
でもやらなきゃ駄目?
35
![Page 36: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/36.jpg)
JISの文字サイズ変更の要件
1.4.4 テキストのサイズ変更の達成基準
キャプション及び文字画像を除き,テキストは,コンテンツ又は機能を損なうことなく,支援技術なしで200 %までサイズ変更できる(レベル AA)。
36
![Page 37: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/37.jpg)
実際にはどうか?
37
![Page 38: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/38.jpg)
サイズ: 小
38
![Page 39: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/39.jpg)
サイズ: 中
39
![Page 40: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/40.jpg)
サイズ: 大
40
![Page 41: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/41.jpg)
文字サイズ変更機能の現実
中を100%としたとき、大は約133%
「大」を複数回押しても大きくならない
拡大される要素はテキストのみ ナビゲーションや見出しの文字は大きくならない
41
![Page 42: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/42.jpg)
熊本県の例
42
![Page 43: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/43.jpg)
熊本県の例
43
![Page 44: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/44.jpg)
ところで……
44
![Page 45: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/45.jpg)
総務省 みんなの公共サイト運用ガイドライン
45
![Page 46: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/46.jpg)
2.1.4. ウェブアクセシビリティ対応に関する誤解
46
![Page 47: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/47.jpg)
2.1.4. ウェブアクセシビリティ対応に関する誤解
注意点!
ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。
47
![Page 48: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/48.jpg)
Webアクセシビリティの確保は特別なことではない。障害者差別解消法の施行で考えるべき企業サイトの品質
48
![Page 49: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/49.jpg)
植木さんのコメント
49
![Page 50: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/50.jpg)
文字サイズ変更ボタンや音声読み上げ機能は
必要なのか?
よくある質問
50
![Page 51: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/51.jpg)
JISに準拠していれば、どちらもいらない
植木さんの回答
51
![Page 52: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/52.jpg)
植木さんのコメント続き
実際に試すと、ほとんど文字の大きさが変わらない文字サイズ変更ボタンが少なくない
最近のWebブラウザであればズーム機能を標準で搭載している
意味のない文字サイズ変更ボタンはやっている感を出すための免罪符に近い
52
![Page 53: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/53.jpg)
基準を満たす方法の例
53
![Page 54: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/54.jpg)
ブラウザのズーム機能を利用する
ブラウザの機能で文字サイズを変えられるようにする
文字サイズ変更ボタンをつける
文字サイズを変えても重なったりはみ出したりしないようにする
54
![Page 55: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/55.jpg)
JISの文字サイズ変更の要件
1.4.4 テキストのサイズ変更の達成基準
キャプション及び文字画像を除き,テキストは,コンテンツ又は機能を損なうことなく,支援技術なしで200 %までサイズ変更できる(レベル AA)。
55
これは何?
![Page 56: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/56.jpg)
JIS X 8341-3:2016 解説
『JIS X 8341-3:2016』は、高齢者や障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく、ウェブコンテンツを利用することができるようにすることを目的としている。そのためにウェブコンテンツが満たすべきアクセシビリティの品質基準として、レベルA、レベルAA、レベルAAAという3つのレベルの達成基準が定められている。
http://waic.jp/docs/jis2016/understanding/201604/
56
![Page 57: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/57.jpg)
3つのレベル
レベル A : 支援技術を駆使すればアクセスできる
レベル AA : 支援技術がなくても多くの環境でアクセスできる
レベル AAA : 支援技術がなくても多くの環境でアクセスしやすい
発展的なもの、達成が難しいものを含む
57
![Page 58: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/58.jpg)
文字サイズの変更はレベル「AA」
支援技術を使えば、以下のようなことが可能 サイト側の文字サイズの指定を無視して
ユーザーが好みのサイズに変更
テキストを音声で読み上げる
58
![Page 59: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/59.jpg)
ここまでのまとめ
59
![Page 60: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/60.jpg)
ここまでのまとめ
文字サイズ変更などの機能は目立つが、あまり役に立っていないこともある
文字サイズが変更できることは大切だが文字サイズ変更ボタンでなくてもよい
文字サイズ変更はレベルAAの達成基準
60
![Page 61: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/61.jpg)
文字サイズ変更ボタンはなくてもいい!
もっと大切なことがある!
ひとことで言うと?
61
![Page 62: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/62.jpg)
気づかないうちにアクセシビリティを確保していた!
![Page 63: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/63.jpg)
アクセシビリティとは(おさらい)
さまざまな利用者がアクセス可能であること 情報を認識して理解できる
さまざまな選択肢が提供されている
自分に合った形で利用できる
63
![Page 64: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/64.jpg)
2.1.4. ウェブアクセシビリティ対応に関する誤解
注意点!
ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。
64
![Page 65: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/65.jpg)
みんなの公共サイト運用ガイドライン (続き)
利用者は、多くの場合、音声読み上げソフトや文字拡大ソフトなど、自分がホームページ等を利用するために必要な支援機能を、自身のパソコン等にインストールし必要な設定を行った上で、その支援機能を活用して様々なホームページ等にアクセスしています。
65
![Page 66: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/66.jpg)
ブラウザや支援技術でアクセスできることが
重要
つまり
66
![Page 67: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/67.jpg)
重要なのは「マシンリーダビリティ」
アクセスできる! テキストが明確
ちゃんとマークアップされている
アクセスできない! テキストが存在しない、あいまい
ちゃんとマークアップされてない
67
![Page 68: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/68.jpg)
実は大切なこと
1. ページタイトルをきちんとつける
2. 階層構造に沿った見出しをつける
3. 見た目に頼り切らない
4. 画像に頼り切らない
5. キーボードだけで操作できる
68
![Page 69: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/69.jpg)
ページタイトルをきちんとつける
69
![Page 70: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/70.jpg)
ページタイトルは重要な手がかり
ブラウザのタブ名
ブックマークのタイトル
表示履歴のタイトル
サーチエンジンやサイト内検索結果
外部からのリンク
70
![Page 71: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/71.jpg)
OK: 内容が連想できるタイトルをつける
71
![Page 72: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/72.jpg)
OK: ツールを使ってタイトルを確認する
72
![Page 73: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/73.jpg)
OK: ツールを使ってタイトルを確認する
73
![Page 74: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/74.jpg)
NG: ページタイトルがない
74
![Page 75: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/75.jpg)
NG: 他のページと区別できないタイトル
75
![Page 76: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/76.jpg)
NG: 長すぎて肝心な部分が切られてしまう
76
![Page 77: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/77.jpg)
階層構造に沿った見出しをつける
77
![Page 78: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/78.jpg)
ユーザーは見出しに注目している
78
![Page 79: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/79.jpg)
OK: レベルに沿った具体的な見出しをつける
79
![Page 80: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/80.jpg)
OK: 同レベルの見出しを異なる見た目にする
80
![Page 81: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/81.jpg)
OK: 見出しを見出しとしてマークアップ
81
![Page 82: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/82.jpg)
NG: 見出しがない
82
![Page 83: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/83.jpg)
NG: 見出しから内容を推測できない
83
![Page 84: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/84.jpg)
NG: 見出しの階層が不適切
84
![Page 85: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/85.jpg)
NG: 見出しがマークアップされていない
85
![Page 86: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/86.jpg)
見た目に頼り切らない
86
![Page 87: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/87.jpg)
視覚デザインは、見えないと伝わらない
色
配置
形・大きさ
文字の装飾
87
![Page 88: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/88.jpg)
OK: 色だけでなくラベルに変化をつける
88
![Page 89: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/89.jpg)
OK: 色分けした要素にラベルを併記
89
![Page 90: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/90.jpg)
OK: 見た目の特徴だけでなくラベルで指示
90
![Page 91: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/91.jpg)
NG: 色に頼った表現
91
![Page 92: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/92.jpg)
NG: 色に頼った表現
92
![Page 93: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/93.jpg)
NG: 配置に頼った表現
93
![Page 94: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/94.jpg)
画像に頼り切らない
94
![Page 95: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/95.jpg)
画像は利用できないことがある
画像が利用できない状況 画像が読み込めない
画像を表示できないブラウザを使っている
スクリーンリーダーを使っている
95
![Page 96: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/96.jpg)
OK: 本文やキャプションで説明する
96
![Page 97: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/97.jpg)
NG: 画像だけで情報が提供されている
97
![Page 98: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/98.jpg)
代替テキストとは?
画像の代替となるテキスト 画像が表示できないとき、代わりに使われる
HTMLでは img 要素の alt 属性で指定
例: <img src=”foo.png” alt=”代替テキスト” />
98
![Page 99: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/99.jpg)
文脈に沿った代替テキストとは
画像の「補足や説明」ではなく「代わり」 画像だけに着目すると失敗しやすい
前後の文や、ページのテーマを含めて考える
「alt属性値」が必ず必要なわけではない 必須なのは「alt属性」
本文がきちんとしていれば「カラ(alt=“”) 」「写真」「図」などが最適なケースも多い
99
![Page 100: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/100.jpg)
OK: 装飾画像の代替テキストは空にする
100
![Page 101: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/101.jpg)
OK: キャプションつきの写真に適切な代替を
101
![Page 102: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/102.jpg)
NG: 装飾画像に説明文が指定されている
102
![Page 103: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/103.jpg)
NG: 代替テキストとキャプションがかぶっている
103
![Page 104: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/104.jpg)
NG: 画像の代替テキストが不適切
104
![Page 105: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/105.jpg)
背景画像は伝わらないことがある
HTMLのimg要素は「内容」 代替テキストが設定できる
スクリーンリーダーやクローラーにも伝わる
CSSの背景画像は「装飾」 ハイコントラストモードや印刷プレビューで消える
スクリーンリーダーやクローラーには伝わらない
105
![Page 106: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/106.jpg)
OK: 意味のある画像は前景に置く
106
![Page 107: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/107.jpg)
OK: 代替テキストが必要な画像は前景に置く
107
![Page 108: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/108.jpg)
NG: 意味を持つ画像を背景画像として実装
108
![Page 109: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/109.jpg)
NG: ロゴやナビゲーションを画像置換で実装
109
![Page 110: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/110.jpg)
Web Developer によるチェック
110
![Page 111: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/111.jpg)
キーボードだけで操作できる
111
![Page 112: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/112.jpg)
さまざまな入力
マウス、トラックパッド、トラックボール、マウスキー、代替マウス、タッチデバイス、キーボード、ソフトウェアキーボード、走査スイッチ、視線入力、音声操作、点字キーボード… …
112
![Page 113: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/113.jpg)
OK: キーボードでも操作可能にする
113
![Page 114: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/114.jpg)
OK: キーボードでも操作可能にする
114
![Page 115: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/115.jpg)
OK: 切り替えボタンを明示する
115
![Page 116: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/116.jpg)
OK: フォーカス表示をブラウザ標準にまかせる
116
![Page 117: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/117.jpg)
NG: マウスクリックでしか操作できない
117
![Page 118: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/118.jpg)
NG: マウスオーバーでしか操作できない
118
![Page 119: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/119.jpg)
NG: スワイプでしか操作できない
119
![Page 120: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/120.jpg)
NG: フォーカス表示が見えない
120
![Page 121: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/121.jpg)
まとめ
![Page 122: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/122.jpg)
文字サイズ変更ボタンはなくてもいい!
さらにもっと大切なことがある!
もう一度
122
![Page 123: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/123.jpg)
重要なのは「マシンリーダビリティ」
アクセスできる! テキストが明確
ちゃんとマークアップされている
アクセスできない! テキストが存在しない、あいまい
ちゃんとマークアップされてない
123
![Page 124: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/124.jpg)
取り組むための重要なポイント
実は特別なことではない 何かを新たに付け足すのではなく、
当たり前のことを真っ当にやることが重要
実は「設計」が重要 テキストが存在しなければマークアップできない
テキストが適切でなければマークアップしてもわかりにくいまま
124
![Page 125: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/125.jpg)
つまり…
実は「戦略」「要件」が重要 何のために、何を、どこまでやるのか?
最初から考えないと、あとで大変になる
どのプロセスにもアクセシビリティのポイントがある Webに関わる全ての人に関係がある
Webに関わるどんな人にもできることがある
125
![Page 126: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/126.jpg)
さあ、はじめよう!
126
![Page 127: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/127.jpg)
デザイニングWebアクセシビリティ
127
![Page 128: 実はできているWebアクセシビリティ 007](https://reader031.vdocuments.pub/reader031/viewer/2022021418/587bddac1a28ab834d8b6ccb/html5/thumbnails/128.jpg)
ありがとうございました次回をご期待ください!!
128