実はできている!? Webアクセシビリティ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

本日の流れ  自己紹介  アクセシビリティとは?  実はできている!?  アクセシビリティだと思っていたが……?  気づかないうちにアクセシビリティを確保していた！ 2

Slide 3

Slide 3 text

自己紹介 3

Slide 4

Slide 4 text

BA 4

Slide 5

Slide 5 text

ウェブアクセシビリティ基盤委員会（WAIC） 5

Slide 6

Slide 6 text

デザイニングWebアクセシビリティ 6

Slide 7

Slide 7 text

アクセシビリティとは?

Slide 8

Slide 8 text

アクセシビリティとは accessibility = accsess + ability  アクセス可能な度合い さまざまな利用者がさまざまな環境でアクセス可能であること  情報を認識して理解できる、操作できる  さまざまな選択肢が提供されている  自分に合った形で利用できる 8

Slide 9

Slide 9 text

さまざまな閲覧環境 9

Slide 10

Slide 10 text

ビジュアルブラウザ (Firefox) 10

Slide 11

Slide 11 text

テキストブラウザ (w3m) 11

Slide 12

Slide 12 text

ダウンローダー(SiteSucker) 12

Slide 13

Slide 13 text

クローラー (Googlebot) 13

Slide 14

Slide 14 text

ハイコントラストモード 14

Slide 15

Slide 15 text

ハイコントラストモード 15

Slide 16

Slide 16 text

拡大ツール (Windows拡大鏡) 16

Slide 17

Slide 17 text

スクリーンリーダー (NVDA) 17

Slide 18

Slide 18 text

スクリーンリーダー (VoiceOver) 18

Slide 19

Slide 19 text

さまざまな入力環境 19

Slide 20

Slide 20 text

さまざまな入力マウス、トラックパッド、トラックボール、マウスキー、代替マウス、タッチデバイス、キーボード、ソフトウェアキーボード、走査スイッチ、視線入力、音声操作、点字キーボード… … 20

Slide 21

Slide 21 text

実際の利用シーン 21

Slide 22

Slide 22 text

障害者のウェブページ利用方法の紹介ビデオ 22

Slide 23

Slide 23 text

障害者のウェブページ利用方法の紹介ビデオ 実際に支援技術を使ってアクセスしている様子を見ることができる  視覚障害者（全盲）  視覚障害者（弱視）  肢体不自由者 http://www.soumu.go.jp/menu_news/s- news/2005/051215_1_wmv.html 23

Slide 24

Slide 24 text

アクセシビリティだと思っていたが……?

Slide 25

Slide 25 text

アクセシビリティに配慮と言われたとき、何を思い浮かべますか? アクセシビリティに配慮したサイトとは? 25

Slide 26

Slide 26 text

文字サイズ変更ボタン・色反転ボタン 26

Slide 27

Slide 27 text

「本文へ」リンク 27

Slide 28

Slide 28 text

カルーセル停止 / 再生ボタン 28

Slide 29

Slide 29 text

JISの文字サイズ変更の要件 1.4.4 テキストのサイズ変更の達成基準キャプション及び文字画像を除き，テキストは，コンテンツ又は機能を損なうことなく，支援技術なしで200 %までサイズ変更できる（レベル AA）。 29

Slide 30

Slide 30 text

実際にはどうか? 30

Slide 31

Slide 31 text

サイズ: 小 31

Slide 32

Slide 32 text

サイズ: 中 32

Slide 33

Slide 33 text

サイズ: 大 33

Slide 34

Slide 34 text

文字サイズ変更機能の現実 要件を満たさないサイトが多い  200%の拡大が求められているが、例示したサイトでは約133%まで  拡大される要素はテキストのみで、ナビゲーションや見出しの文字は大きくならない  画像が多用されているとほとんど変わらないことも 34

Slide 35

Slide 35 text

総務省みんなの公共サイト運用ガイドライン 35

Slide 36

Slide 36 text

2.1.4. ウェブアクセシビリティ対応に関する誤解 36

Slide 37

Slide 37 text

2.1.4. ウェブアクセシビリティ対応に関する誤解注意点！ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。 37

Slide 38

Slide 38 text

Webアクセシビリティの確保は特別なことではない。障害者差別解消法の施行で考えるべき企業サイトの品質 38

Slide 39

Slide 39 text

植木さんのコメント 実際に試すと、ほとんど文字の大きさが変わらない文字サイズ変更ボタンが少なくない 最近のWebブラウザであればズーム機能を標準で搭載している 意味のない文字サイズ変更ボタンはやっている感を出すための免罪符に近い 39

Slide 40

Slide 40 text

基準を満たす方法の例 40

Slide 41

Slide 41 text

ブラウザのズーム機能を利用する ブラウザの機能で文字サイズを変えられるようにする 文字サイズ変更ボタンをつける 文字サイズを変えても重なったりはみ出したりしないようにする 41

Slide 42

Slide 42 text

ここまでのまとめ 42

Slide 43

Slide 43 text

ここまでのまとめ 文字サイズ変更などの機能は目立つが、あまり役に立っていないこともある 文字サイズが変更できることは大切だが文字サイズ変更ボタンでなくてもよい 43

Slide 44

Slide 44 text

文字サイズ変更ボタンはなくてもいい! もっと大切なことがある! ひとことで言うと? 44

Slide 45

Slide 45 text

気づかないうちにアクセシビリティを確保していた! ～実装・デザイン編～

Slide 46

Slide 46 text

みんなの公共サイト運用ガイドライン (続き) 利用者は、多くの場合、音声読み上げソフトや文字拡大ソフトなど、自分がホームページ等を利用するために必要な支援機能を、自身のパソコン等にインストールし必要な設定を行った上で、その支援機能を活用して様々なホームページ等にアクセスしています。 46

Slide 47

Slide 47 text

ブラウザや支援技術でアクセスできることが重要つまり 47

Slide 48

Slide 48 text

重要なのは「マシンリーダビリティ」 アクセスできる！  テキストが明確  ちゃんとマークアップされている アクセスできない！  テキストが存在しない、あいまい  ちゃんとマークアップされてない 48

Slide 49

Slide 49 text

実は大切なこと 1. ページタイトルをきちんとつける 2. 階層構造に沿った見出しをつける 3. 見た目に頼り切らない 4. 画像に頼り切らない 5. キーボードだけで操作できる 49

Slide 50

Slide 50 text

ページタイトルをきちんとつける 50

Slide 51

Slide 51 text

ページタイトルは重要な手がかり ブラウザのタブ名 ブックマークのタイトル 表示履歴のタイトル サーチエンジンやサイト内検索結果 外部からのリンク 51

Slide 52

Slide 52 text

OK: 内容が連想できるタイトルをつける 52

Slide 53

Slide 53 text

NG: ページタイトルがない 53

Slide 54

Slide 54 text

NG: 他のページと区別できないタイトル 54

Slide 55

Slide 55 text

階層構造に沿った見出しをつける 55

Slide 56

Slide 56 text

ユーザーは見出しに注目している 56

Slide 57

Slide 57 text

OK: レベルに沿った具体的な見出しをつける 57

Slide 58

Slide 58 text

OK: 見出しを見出しとしてマークアップ 58

Slide 59

Slide 59 text

NG: 見出しがない 59

Slide 60

Slide 60 text

NG: 見出しから内容を推測できない 60

Slide 61

Slide 61 text

NG: 見出しがマークアップされていない 61

Slide 62

Slide 62 text

見た目に頼り切らない 62

Slide 63

Slide 63 text

視覚デザインは、見えないと伝わらない 色 配置 形・大きさ 文字の装飾 63

Slide 64

Slide 64 text

OK: 色だけでなくラベルに変化をつける 64

Slide 65

Slide 65 text

NG: 色に頼った表現 65

Slide 66

Slide 66 text

NG: 配置に頼った表現 66

Slide 67

Slide 67 text

画像に頼り切らない 67

Slide 68

Slide 68 text

画像は利用できないことがある 画像が利用できない状況  画像が読み込めない  画像を表示できないブラウザを使っている  スクリーンリーダーを使っている 68

Slide 69

Slide 69 text

OK: 本文やキャプションで説明する 69

Slide 70

Slide 70 text

NG: 画像だけで情報が提供されている 70

Slide 71

Slide 71 text

代替テキストとは? 画像の代替となるテキスト  画像が表示できないとき、代わりに使われる  HTMLでは img 要素の alt 属性で指定例: ”代替テキスト”

Slide 72

Slide 72 text

文脈に沿った代替テキストとは 画像の「補足や説明」ではなく「代わり」  画像だけに着目すると失敗しやすい  前後の文や、ページのテーマを含めて考える 「alt属性値」が必ず必要なわけではない  必須なのは「alt属性」  本文がきちんとしていれば「カラ（alt=“”）」「写真」「図」などが最適なケースも多い 72

Slide 73

Slide 73 text

OK: 装飾画像の代替テキストは空にする 73

Slide 74

Slide 74 text

OK: キャプションつきの写真に適切な代替を 74

Slide 75

Slide 75 text

NG: 装飾画像に説明文が指定されている 75

Slide 76

Slide 76 text

NG: 代替テキストとキャプションがかぶっている 76

Slide 77

Slide 77 text

NG: 画像の代替テキストが不適切 77

Slide 78

Slide 78 text

背景画像は伝わらないことがある HTMLのimg要素は「内容」  代替テキストが設定できる  スクリーンリーダーやクローラーにも伝わる CSSの背景画像は「装飾」  ハイコントラストモードや印刷プレビューで消える  スクリーンリーダーやクローラーには伝わらない 78

Slide 79

Slide 79 text

OK: 意味のある画像は前景に置く 79

Slide 80

Slide 80 text

NG: 意味を持つ画像を背景画像として実装 80

Slide 81

Slide 81 text

NG: ロゴやナビゲーションを画像置換で実装 81

Slide 82

Slide 82 text

キーボードだけで操作できる 82

Slide 83

Slide 83 text

OK: キーボードでも操作可能にする 83

Slide 84

Slide 84 text

OK: 切り替えボタンを明示する 84

Slide 85

Slide 85 text

OK: フォーカス表示をブラウザ標準にまかせる 85

Slide 86

Slide 86 text

NG: マウスクリックでしか操作できない 86

Slide 87

Slide 87 text

NG: マウスオーバーでしか操作できない 87

Slide 88

Slide 88 text

NG: スワイプでしか操作できない 88

Slide 89

Slide 89 text

NG: フォーカス表示が見えない 89

Slide 90

Slide 90 text

まとめ

Slide 91

Slide 91 text

文字サイズ変更ボタンはなくてもいい! さらにもっと大切なことがある! もう一度 91

Slide 92

Slide 92 text

実装で重要なのは「マシンリーダビリティ」 アクセスできる！  テキストが明確  ちゃんとマークアップされている アクセスできない！  テキストが存在しない、あいまい  ちゃんとマークアップされてない 92

Slide 93

Slide 93 text

取り組むための重要なポイント 実は特別なことではない  何かを新たに付け足すのではなく、当たり前のことを真っ当にやることが重要 実は「設計」が重要  テキストが存在しなければマークアップできない  テキストが適切でなければマークアップしてもわかりにくいまま 93

Slide 94

Slide 94 text

つまり… どのプロセスにもアクセシビリティのポイントがある  Webに関わる全ての人に関係がある  Webに関わるどんな人にもできることがある 94