実はて?きているWebアクセシヒ?リティ 007
?
8 likes?2,440 views
4/28 hireLink vol.16 実はできている!? Webアクセシビリティ講演資料です。 登壇者 太田良典 BA アクセシビリティスペシャリスト HTML4.01のW3C仕様書を翻訳した「HTML4仕様書邦訳計画補完委員会」の委員を務めた後、2001年にBAに参加。 Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞（情報セキュリティ部門）」を受賞。 アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会（WAIC）の委員として活動。 著書（共著）に「Dreamweaverプロフェッショナル?スタイル」「デザイニングWebアクセシビリティ」など。 http://www.b-architects.com http://bakera.jp/ http://twitter.com/bakera 伊原力也 BA シニア?インフォメーションアーキテクト HCD-Net認定 人間中心設計専門家。 ウェブアクセシビリティ基盤委員会（WAIC）理解と普及作業部会委員。 1999年よりWeb標準に則ったWebサイトの構築業務に従事。 2004年にBAに参加。マークアップデザインエンジニアとして業務を行う傍ら、HCD（人間中心設計）プロセス導入を推進。 現在はプロジェクト設計、調査分析、コンセプト立案から、アクセシビリティおよびユーザビリティを確保したインタラクションデザイン、さらにフロントエンド実装のディレクションまでを一貫して手がける。 クリエイティブユニットmokuva所属。 http://www.b-architects.com/ http://mokuva.com/ http://twitter.com/magi1125
実はて?きているWebアクセシヒ?リティ 007
- 2. 注意事項 ? 会場は禁煙です。 喫煙所が地下一階にありますのでご利用ください。 ? ハッシュタグは#a11ybooksとなります。 ? イベントの模様は自由に撮影いただき、ブログやSNS等で 拡散いただいて構いません（むしろお願いします）。 主催者も、公式Facebookページ用に写真撮影をいたします （ご了承ください） ? スライドの公開は主催者よりSNSなどでご案内します。 2
- 3. 本日の流れ ? 自己紹介 ? アクセシビリティとは? ? アクセシビリティだと思っていたが……? ? 気づかないうちにアクセシビリティを確保していた！ 3
- 4. 自己紹介 4
- 5. BA 5
- 8. アクセシビリティとは?
- 10. さまざまな環境 10
- 12. テキストブラウザ(w3m) 12
- 15. ハイコントラストモード 15
- 16. ハイコントラストモード 16
- 20. 代替マウス 20
- 21. 点字ディスプレイ 21
- 22. 視線入力装置 22
- 25. 福島県大野城市 25
- 26. 福島県大野城市 26
- 28. 東京都西東京市 28
- 29. 東京都西東京市 29
- 30. 「本文へ」リンク 30
- 33. カルーセル停止/再生ボタン 33
- 34. どう思われますか? 34
- 36. JISの文字サイズ変更の要件 1.4.4 テキストのサイズ変更の達成基準 キャプション及び文字画像を除き，テキスト は，コンテンツ又は機能を損なうことなく， 支援技術なしで200 %までサイズ変更できる （レベル AA）。 36
- 37. 実際にはどうか? 37
- 38. サイズ:小 38
- 39. サイズ:中 39
- 40. サイズ:大 40
- 41. 文字サイズ変更機能の現実 ?中を100%としたとき、大は約133% ?「大」を複数回押しても大きくならない ?拡大される要素はテキストのみ ? ナビゲーションや見出しの文字は大きくならない 41
- 42. 熊本県の例 42
- 43. 熊本県の例 43
- 44. ところで…… 44
- 49. 植木さんのコメント 49
- 53. 基準を満たす方法の例 53
- 55. JISの文字サイズ変更の要件 1.4.4 テキストのサイズ変更の達成基準 キャプション及び文字画像を除き，テキスト は，コンテンツ又は機能を損なうことなく， 支援技術なしで200 %までサイズ変更できる （レベル AA）。 55 これは何?
- 57. 3つのレベル ?レベルA: ? 支援技術を駆使すればアクセスできる ?レベルAA: ? 支援技術がなくても多くの環境でアクセスできる ?レベルAAA: ? 支援技術がなくても多くの環境でアクセスしやすい 発展的なもの、達成が難しいものを含む 57
- 59. ここまでのまとめ 59
- 63. アクセシビリティとは（おさらい） ?さまざまな利用者がアクセス可能であること ? 情報を認識して理解できる ? さまざまな選択肢が提供されている ? 自分に合った形で利用できる 63
- 67. 重要なのは「マシンリーダビリティ」 ?アクセスできる！ ? テキストが明確 ? ちゃんとマークアップされている ?アクセスできない！ ? テキストが存在しない、あいまい ? ちゃんとマークアップされてない 67
- 68. 実は大切なこと 1. ページタイトルをきちんとつける 2. 階層構造に沿った見出しをつける 3. 見た目に頼り切らない 4. 画像に頼り切らない 5. キーボードだけで操作できる 68
- 74. NG:ページタイトルがない 74
- 82. NG:見出しがない 82
- 84. NG:見出しの階層が不適切 84
- 86. 見た目に頼り切らない 86
- 91. NG:色に頼った表現 91
- 92. NG:色に頼った表現 92
- 93. NG:配置に頼った表現 93
- 94. 画像に頼り切らない 94
- 95. 画像は利用できないことがある ?画像が利用できない状況 ? 画像が読み込めない ? 画像を表示できないブラウザを使っている ? スクリーンリーダーを使っている 95
- 98. 代替テキストとは? ?画像の代替となるテキスト ? 画像が表示できないとき、代わりに使われる ? HTMLではimg 要素のalt属性で指定 例: <imgsrc=/slideshow/web-007/61445233/”foo.png” alt=”代替テキスト” /> 98
- 99. 文脈に沿った代替テキストとは ?画像の「補足や説明」ではなく「代わり」 ? 画像だけに着目すると失敗しやすい ? 前後の文や、ページのテーマを含めて考える ?「alt属性値」が必ず必要なわけではない ? 必須なのは「alt属性」 ? 本文がきちんとしていれば「カラ（alt=“”） 」 「写真」「図」などが最適なケースも多い 99
- 104. NG:画像の代替テキストが不適切 104
- 105. 背景画像は伝わらないことがある ?HTMLのimg要素は「内容」 ? 代替テキストが設定できる ? スクリーンリーダーやクローラーにも伝わる ?CSSの背景画像は「装飾」 ? ハイコントラストモードや印刷プレビューで消える ? スクリーンリーダーやクローラーには伝わらない 105
- 106. OK:意味のある画像は前景に置く 106
- 111. キーボードだけで操作できる 111
- 112. さまざまな入力 マウス、トラックパッド、トラックボール、マウス キー、代替マウス、タッチデバイス、キーボード、 ソフトウェアキーボード、走査スイッチ、 視線入力、音声操作、点字キーボード…… 112
- 115. OK:切り替えボタンを明示する 115
- 119. NG:スワイプでしか操作できない 119
- 120. NG:フォーカス表示が見えない 120
- 121. まとめ
- 123. 重要なのは「マシンリーダビリティ」 ?アクセスできる！ ? テキストが明確 ? ちゃんとマークアップされている ?アクセスできない！ ? テキストが存在しない、あいまい ? ちゃんとマークアップされてない 123
- 124. 取り組むための重要なポイント ?実は特別なことではない ? 何かを新たに付け足すのではなく、 当たり前のことを真っ当にやることが重要 ?実は「設計」が重要 ? テキストが存在しなければマークアップできない ? テキストが適切でなければ マークアップしてもわかりにくいまま 124
- 125. つまり… ?実は「戦略」「要件」が重要 ? 何のために、何を、どこまでやるのか? ? 最初から考えないと、あとで大変になる ?どのプロセスにも アクセシビリティのポイントがある ? Webに関わる全ての人に関係がある ? Webに関わるどんな人にもできることがある 125
- 126. さあ、はじめよう! 126