Download as PDF, PPTX
More Related Content
実はできている!? Webアクセシビリティ
- 1.
- 2. 注意事項 会場は禁煙です。 ハッシュタグは#a11ybooksとなります。 イベントの模様は自由に撮影いただき、ブログやSNS等で 拡散いただいて構いません（むしろお願いします）。 主催者も、公式Facebookページ用に写真撮影をいたします （ご了承ください） スライドの公開は主催者よりSNSなどでご案内します。 2
- 3. 本日の流れ 自己紹介 アクセシビリティとは? 実はできている!? アクセシビリティだと思っていたが……? 気づかないうちにアクセシビリティを確保していた！ 3
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. 障害者のウェブページ利用方法の紹介ビデオ 実際に支援技術を使ってアクセスしている 様子を見ることができる 視覚障害者（全盲） 視覚障害者（弱視） 肢体不自由者 http://www.soumu.go.jp/menu_news/s- news/2005/051215_1_wmv.html 24
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. 3つのレベル レベルA: 支援技術を駆使すればアクセスできる レベルAA: 支援技術がなくても多くの環境でアクセスできる レベルAAA: 支援技術がなくても多くの環境でアクセスしやすい 発展的なもの、達成が難しいものを含む 56
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. 重要なのは「マシンリーダビリティ」 アクセスできる！ テキストが明確 ちゃんとマークアップされている アクセスできない！ テキストが存在しない、あいまい ちゃんとマークアップされてない 66
- 67. 実は大切なこと 1. ページタイトルをきちんとつける 2. 階層構造に沿った見出しをつける 3.見た目に頼り切らない 4. 画像に頼り切らない 5. キーボードだけで操作できる 67
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91. 画像は利用できないことがある 画像が利用できない状況 画像が読み込めない 画像を表示できないブラウザを使っている スクリーンリーダーを使っている 91
- 92.
- 93.
- 94. 代替テキストとは? 画像の代替となるテキスト 画像が表示できないとき、代わりに使われる HTMLではimg要素のalt属性で指定 例: <imgsrc=”foo.png” alt=”代替テキスト” /> 94
- 95. 文脈に沿った代替テキストとは 画像の「補足や説明」ではなく「代わり」 画像だけに着目すると失敗しやすい 前後の文や、ページのテーマを含めて考える 「alt属性値」が必ず必要なわけではない 必須なのは「alt属性」 本文がきちんとしていれば「カラ（alt=“”） 」 「写真」「図」などが最適なケースも多い 95
- 96.
- 97.
- 98.
- 99.
- 100.
- 101. 背景画像は伝わらないことがある HTMLのimg要素は「内容」 代替テキストが設定できる スクリーンリーダーやクローラーにも伝わる CSSの背景画像は「装飾」 ハイコントラストモードや印刷プレビューで消える スクリーンリーダーやクローラーには伝わらない 101
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116. 「適切なテキスト」のための設計 1. 内容を推測できるカテゴリ名にする 2. わかりやすい現在地表示をつける 3.リンク先がわかるようにする 4. フォームのラベルを明確にする 5. フォームのエラーを明確にする 116
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154. 方針がないとどうなる? 配慮が全く行われない 公開に実は必要だったとなっても後の祭り 適切な判断ができない 判断がぶれる、人によって判断が異なる 合意形成ができない、覆る プロジェクト内、あるいはクライアントとの衝突 154
- 155.
- 156.
- 157.
- 158.
- 159.
- 160. 定めるべきことは意外に少ない 必須項目 対象の範囲 (サイトのURLなど) 適合レベル及び対応度 (レベルAA準拠、など) その他、定めると良い項目 達成までの期限、例外事項、追加の達成基準、 担当部署、現時点での問題点への対応など 160
- 161.
- 162.
- 163.
- 164.
- 165.
- 166. 各種ガイドラインを参考に 制作プロセスに関するガイドライン ウェブアクセシビリティ方針策定ガイドライン JISX8341-3:2016対応発注ガイドライン JISX8341-3:2016試験実施ガイドライン ※「ウェブコンテンツのJIS X8341-3:2016対応度表記ガ イドライン」は「準拠」の表記に関するもので、これら 全てに関連する 166
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178. 178 以下ランキング同業種内1位評価獲得 • 全上場企業ホームページ充実度ランキング調査 • IRサイト総合ランキング •主要企業Webユーザビリティランキング • インターネットIR表彰 実例
- 179.
- 180.
- 181.
- 182. 表記 ウェブアクセシビ リティ方針の提示 又は公開 目標とする適合レ ベルの達成基準の 試験結果 追加表記事項 準拠 必須 試験を実施し、達成 基準を全て満たして いることを確認 なし 一部準拠 必須 試験を実施し、達成 基準の一部を満たし ていることを確認 今後の対応方針 部分適合に関する記 述（適用する場合） 配慮必須 試験の実施の有無、 結果は問わない 目標とした適合レベ ル又は参照した達成 基準一覧 ただし……「準拠」の意味、分かっていますか? 182
- 183.
- 184. 「 JIS X8341-3:2010」 の「等級A」への 準拠を検討しているが、本方針は 要件定義工程でのWEBサイト検討状況を 踏まえ決定する想定です。 アクセシビリティ方針の検討方法についても ご提案ください。 184 実例
- 185. 制作と合わせて方針の提案も求められるケース 185 ウェブアクセシビリティ方針策定ガイドライン JIS X 8341-3:2016対応発注ガイドライン 提 案 書 作 成 Ｒ Ｆ Ｐ 作 成
- 186.
- 187.
- 188.
- 189. 目的もドキュメント化しよう なぜアクセシビリティに取り組むかを明文化 何のためのアクセシビリティなのかを押さえる 公開されている他社の方針を参考にするのも良い ただし、意味も分からずにコピペはNG 目的が明確になると、 手段と目的の混同を避けられる 「基準を満たすこと」は最終目的ではないはず 189
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200. 実装で重要なのは「マシンリーダビリティ」 アクセスできる！ テキストが明確 ちゃんとマークアップされている アクセスできない！ テキストが存在しない、あいまい ちゃんとマークアップされてない 200
- 201. 設計や企画時の配慮も重要 わかりやすいテキストを設計しよう わかりやすいラベルは誰にとっても有用 ナビゲーションやリンクやフォームの設計時に 少し気をつけるだけでグッと良くなる 方針を立ててみよう 何のために、何を、どこまでやるのか? 製作の前（発注前、提案時、受注後）に考えよう 201
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.