実はできている!?Webアクセシビリティ
View Slide
注意事項 会場は禁煙です。 ハッシュタグは#a11ybooks となります。 イベントの模様は自由に撮影いただき、ブログやSNS等で拡散いただいて構いません（むしろお願いします）。主催者も、公式Facebookページ用に写真撮影をいたします（ご了承ください） スライドの公開は主催者よりSNSなどでご案内します。2
本日の流れ 自己紹介 アクセシビリティとは? 実はできている!? アクセシビリティだと思っていたが……? 気づかないうちにアクセシビリティを確保していた！3
自己紹介4
BA5
ウェブアクセシビリティ基盤委員会（WAIC）6
デザイニングWebアクセシビリティ7
アクセシビリティとは?
アクセシビリティとはさまざまな利用者がさまざまな環境でアクセス可能であること 情報を認識して理解できる さまざまな選択肢が提供されている 自分に合った形で利用できる9
さまざまな環境10
ビジュアルブラウザ(Firefox)11
テキストブラウザ(w3m)12
ダウンローダー(SiteSucker)13
クローラー(Googlebot)14
ハイコントラストモード15
ハイコントラストモード16
拡大ツール(Windows拡大鏡)17
スクリーンリーダー(NVDA)18
スクリーンリーダー(VoiceOver)19
代替マウス20
点字ディスプレイ21
視線入力装置22
障害者のウェブページ利用方法の紹介ビデオ23
障害者のウェブページ利用方法の紹介ビデオ実際に支援技術を使ってアクセスしている様子を見ることができる 視覚障害者（全盲） 視覚障害者（弱視） 肢体不自由者http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html24
アクセシビリティだと思っていたが……?
アクセシビリティに配慮と言われたとき、何を思い浮かべますか?アクセシビリティに配慮したサイトとは?26
福岡県大野城市27
福岡県大野城市28
文字サイズ変更ボタン・色反転ボタン29
東京都西東京市30
東京都西東京市31
「本文へ」リンク32
東京オリンピック・パラリンピック競技大会組織委員会33
東京オリンピック・パラリンピック競技大会組織委員会34
カルーセル停止/ 再生ボタン35
JISの文字サイズ変更の要件1.4.4 テキストのサイズ変更の達成基準キャプション及び文字画像を除き，テキストは，コンテンツ又は機能を損なうことなく，支援技術なしで200 %までサイズ変更できる（レベル AA）。36
実際にはどうか?37
サイズ: 小38
サイズ: 中39
サイズ: 大40
文字サイズ変更機能の現実中を100%としたとき、大は約133%「大」を複数回押しても大きくならない拡大される要素はテキストのみ ナビゲーションや見出しの文字は大きくならない41
熊本県の例42
熊本県の例43
ところで……44
総務省 みんなの公共サイト運用ガイドライン45
2.1.4. ウェブアクセシビリティ対応に関する誤解46
2.1.4. ウェブアクセシビリティ対応に関する誤解注意点！ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。47
Webアクセシビリティの確保は特別なことではない。障害者差別解消法の施行で考えるべき企業サイトの品質48
植木さんのコメント49
文字サイズ変更ボタンや音声読み上げ機能は必要なのか？よくある質問50
JISに準拠していれば、どちらもいらない植木さんの回答51
植木さんのコメント続き実際に試すと、ほとんど文字の大きさが変わらない文字サイズ変更ボタンが少なくない最近のWebブラウザであればズーム機能を標準で搭載している意味のない文字サイズ変更ボタンはやっている感を出すための免罪符に近い52
基準を満たす方法の例53
ブラウザのズーム機能を利用するブラウザの機能で文字サイズを変えられるようにする文字サイズ変更ボタンをつける文字サイズを変えても重なったりはみ出したりしないようにする54
JISの文字サイズ変更の要件1.4.4 テキストのサイズ変更の達成基準キャプション及び文字画像を除き，テキストは，コンテンツ又は機能を損なうことなく，支援技術なしで200 %までサイズ変更できる（レベル AA）。55これは何?
3つのレベルレベルA : 支援技術を駆使すればアクセスできるレベルAA: 支援技術がなくても多くの環境でアクセスできるレベルAAA : 支援技術がなくても多くの環境でアクセスしやすい発展的なもの、達成が難しいものを含む56
文字サイズの変更はレベル「AA」支援技術を使えば、以下のようなことが可能 サイト側の文字サイズの指定を無視してユーザーが好みのサイズに変更 テキストを音声で読み上げる57
ここまでのまとめ58
ここまでのまとめ文字サイズ変更などの機能は目立つが、あまり役に立っていないこともある文字サイズが変更できることは大切だが文字サイズ変更ボタンでなくてもよい文字サイズ変更はレベルAAの達成基準59
文字サイズ変更ボタンはなくてもいい!もっと大切なことがある!ひとことで言うと?60
気づかないうちにアクセシビリティを確保していた!～実装・デザイン編～
アクセシビリティとは（おさらい）さまざまな利用者がアクセス可能であること 情報を認識して理解できる さまざまな選択肢が提供されている 自分に合った形で利用できる62
2.1.4. ウェブアクセシビリティ対応に関する誤解注意点！ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。63
みんなの公共サイト運用ガイドライン(続き)利用者は、多くの場合、音声読み上げソフトや文字拡大ソフトなど、自分がホームページ等を利用するために必要な支援機能を、自身のパソコン等にインストールし必要な設定を行った上で、その支援機能を活用して様々なホームページ等にアクセスしています。64
ブラウザや支援技術でアクセスできることが重要つまり65
重要なのは「マシンリーダビリティ」アクセスできる！ テキストが明確 ちゃんとマークアップされているアクセスできない！ テキストが存在しない、あいまい ちゃんとマークアップされてない66
実は大切なこと1. ページタイトルをきちんとつける2. 階層構造に沿った見出しをつける3. 見た目に頼り切らない4. 画像に頼り切らない5. キーボードだけで操作できる67
ページタイトルをきちんとつける68
ページタイトルは重要な手がかりブラウザのタブ名ブックマークのタイトル表示履歴のタイトルサーチエンジンやサイト内検索結果外部からのリンク69
OK:内容が連想できるタイトルをつける70
OK:ツールを使ってタイトルを確認する71
NG:ページタイトルがない72
NG:他のページと区別できないタイトル73
NG:長すぎて肝心な部分が切られてしまう74
階層構造に沿った見出しをつける75
ユーザーは見出しに注目している76
OK:レベルに沿った具体的な見出しをつける77
OK: 見出しを見出しとしてマークアップ78
NG:見出しがない79
NG:見出しから内容を推測できない80
NG:見出しの階層が不適切81
NG: 見出しがマークアップされていない82
見た目に頼り切らない83
視覚デザインは、見えないと伝わらない色配置形・大きさ文字の装飾84
OK:色だけでなくラベルに変化をつける85
OK:見た目の特徴だけでなくラベルで指示86
NG: 色に頼った表現87
NG: 色に頼った表現88
NG: 配置に頼った表現89
画像に頼り切らない90
画像は利用できないことがある画像が利用できない状況 画像が読み込めない 画像を表示できないブラウザを使っている スクリーンリーダーを使っている91
OK:本文やキャプションで説明する92
NG: 画像だけで情報が提供されている93
代替テキストとは?画像の代替となるテキスト 画像が表示できないとき、代わりに使われる HTMLではimg 要素のalt 属性で指定例: 94
文脈に沿った代替テキストとは画像の「補足や説明」ではなく「代わり」 画像だけに着目すると失敗しやすい 前後の文や、ページのテーマを含めて考える「alt属性値」が必ず必要なわけではない 必須なのは「alt属性」 本文がきちんとしていれば「カラ（alt=“”） 」「写真」「図」などが最適なケースも多い95
OK: 装飾画像の代替テキストは空にする96
OK: キャプションつきの写真に適切な代替を97
NG: 装飾画像に説明文が指定されている98
NG: 代替テキストとキャプションがかぶっている99
NG: 画像の代替テキストが不適切100
背景画像は伝わらないことがあるHTMLのimg要素は「内容」 代替テキストが設定できる スクリーンリーダーやクローラーにも伝わるCSSの背景画像は「装飾」 ハイコントラストモードや印刷プレビューで消える スクリーンリーダーやクローラーには伝わらない101
OK: 意味のある画像は前景に置く102
NG: 意味を持つ画像を背景画像として実装103
NG: ロゴやナビゲーションを画像置換で実装104
Web Developerによるチェック105
キーボードだけで操作できる106
さまざまな入力マウス、トラックパッド、トラックボール、マウスキー、代替マウス、タッチデバイス、キーボード、ソフトウェアキーボード、走査スイッチ、視線入力、音声操作、点字キーボード… …107
OK: キーボードでも操作可能にする108
OK: 切り替えボタンを明示する109
OK: フォーカス表示をブラウザ標準にまかせる110
NG: マウスクリックでしか操作できない111
NG: マウスオーバーでしか操作できない112
NG: スワイプでしか操作できない113
NG: フォーカス表示が見えない114
気づかないうちにアクセシビリティを確保していた!～設計編～
「適切なテキスト」のための設計1. 内容を推測できるカテゴリ名にする2. わかりやすい現在地表示をつける3. リンク先がわかるようにする4. フォームのラベルを明確にする5. フォームのエラーを明確にする116
内容を推測できるカテゴリ名にする117
OK: 内容を推測できるカテゴリ名にする118
OK: ルールと仕組みで一貫性を保つ119
NG: カテゴリ名がわかりにくい120
NG: ラベルがバラバラ121
わかりやすい現在地表示をつける122
OK: 一般的なわかりやすい現在地表示をつける123
OK: 一般的なわかりやすい現在地表示をつける124
NG: 現在地を把握する手段がない125
NG: 現在地の表示と間違えそうな表現がある126
注:コンテンツを邪魔しては意味がない127
リンク先がわかるようにする128
ユーザーはリンクに注目している129
OK:リンクにリンク先のタイトルを加える130
OK: 文中リンクを外に出して独立させる131
NG: ラベルがないリンク132
NG:「こちら」リンク133
NG:「もっと読む」「詳細」リンク134
フォームのラベルを明確にする135
OK: 具体的で明確なラベルをつける136
OK: 必須項目を明確にする137
OK: 必要に応じて説明をつける138
OK: プレースホルダをラベル代わりにしない139
NG: ラベルや説明があいまいで混乱する140
NG: 必須か任意かがわからない141
NG: 必要な説明がなく、入力の条件がわからない142
NG: ラベルがなく、入力欄が何なのかわからない143
フォームのエラーを明確にする144
OK: エラー箇所を明確に示す145
OK: エラー表示と修正フォームをセットにする146
OK: エラー理由と修正方法を明示する147
NG:エラー箇所がわからず修正できない148
NG: エラー表示画面と入力画面がわかれている149
NG: エラーメッセージが理解できず修正できない150
気づかないうちにアクセシビリティを確保していた!～企画・要件編～
プロジェクトの最初から「アクセシビリティをどうするか?」を決めておくべしちゃんとやるには「アクセシビリティ方針」152
方針がないと……153
方針がないとどうなる?配慮が全く行われない 公開に実は必要だったとなっても後の祭り適切な判断ができない 判断がぶれる、人によって判断が異なる合意形成ができない、覆る プロジェクト内、あるいはクライアントとの衝突154
まずは最低限の方針を立てよう155
Webアクセシビリティ方針とは?156
JIS X 8341-3:2016 附属書JAJA.1 企画企画段階においてウェブページ一式の責任者は，ウェブアクセシビリティ方針を策定する。策定したウェブアクセシビリティ方針は，ウェブサイトではサイト上，ウェブアプリケーションではマニュアルなどで公開するとよい。157
方針策定ガイドライン158
難しそう!159
定めるべきことは意外に少ない必須項目 対象の範囲 (サイトのURLなど) 適合レベル及び対応度 (レベルAA準拠、など)その他、定めると良い項目 達成までの期限、例外事項、追加の達成基準、担当部署、現時点での問題点への対応など160
実はやっていた!161
アクセシビリティについては「JIS X 8341-3:2010」に準拠すること。達成等級は以下の通り:達成等級ＡＡ 準拠162実例
方針策定のコツ163
無理のない範囲で164
明確に定めるガイドラインに沿って目標とするレベルを決める 特にアクセシビリティが重要ならレベルAA適用範囲、期限などをはっきりさせる 基本的にはサイト全体、公開時に対応でよい 例外ができてしまう場合は明確にする165
各種ガイドラインを参考に制作プロセスに関するガイドライン ウェブアクセシビリティ方針策定ガイドライン JIS X 8341-3:2016 対応発注ガイドライン JIS X 8341-3:2016 試験実施ガイドライン※「ウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン」は「準拠」の表記に関するもので、これら全てに関連する166
方針があればそれでいいのか?方針があっても、適切でないものだと効果を発揮しない あいまいな方針を立ててしまう 誤解に基づいて方針を立ててしまう 手段が目的になってしまう167
実際にあったこんな要件168あまり良くない例
あいまいな方針を立ててしまうケース169
170セキュリティ、Web標準、アクセシビリティに配慮し制作すること。実例
勢いはあるが……具体的に何をどうすれば良いのかからない 「配慮する」といっても人によって基準がまちまち171
172アクセシビリティについては「JIS X 8341-3:2010」に準拠すること。実例
JISに沿うことはわかるが……目標とするレベルが不明 たとえばAAの達成基準を満たすべきなのかどうかわからない173
誤解に基づいて方針を立ててしまうケース174
175文字拡大機能ブラウザの機能ではなく、ページ上のボタンをクリックすることでCSS を切り替え処理等により容易に文字サイズを変更できるようにすること。サイズについては３サイズ程度選択できるようにすること。実例
その結果176
手段が目的になってしまうケース177
178以下ランキング同業種内1位評価獲得• 全上場企業ホームページ充実度ランキング調査• IRサイト総合ランキング• 主要企業Webユーザビリティランキング• インターネットIR表彰実例
ランキング対策の「アクセシビリティ対応」179
実際にあったこんな要件180なかなか良いと思える例
アクセシビリティについては「JIS X 8341-3:2010」に準拠すること。達成等級は以下の通り:達成等級ＡＡ 準拠181実例
表記ウェブアクセシビリティ方針の提示又は公開目標とする適合レベルの達成基準の試験結果追加表記事項準拠 必須試験を実施し、達成基準を全て満たしていることを確認なし一部準拠 必須試験を実施し、達成基準の一部を満たしていることを確認今後の対応方針部分適合に関する記述（適用する場合）配慮 必須試験の実施の有無、結果は問わない目標とした適合レベル又は参照した達成基準一覧ただし…… 「準拠」の意味、分かっていますか?182
アクセシビリティ、ユーザビリティについて、弊社のレベルを考慮いただき準拠基準をご提案ください。183実例
「 JIS X 8341-3:2010」 の「等級A」への準拠を検討しているが、本方針は要件定義工程でのWEBサイト検討状況を踏まえ決定する想定です。アクセシビリティ方針の検討方法についてもご提案ください。184実例
制作と合わせて方針の提案も求められるケース185ウェブアクセシビリティ方針策定ガイドラインJIS X 8341-3:2016 対応発注ガイドライン提案書作成ＲＦＰ作成
制作と合わせて方針の提案も求められるケース方針や策定プロセスも一緒に考えればよい あいまいに書くよりも、ずっと良いアプローチ 受注側の力の見せどころ186
目的もドキュメント化しよう187
ヤフー株式会社ウェブアクセシビリティ方針188
目的もドキュメント化しようなぜアクセシビリティに取り組むかを明文化 何のためのアクセシビリティなのかを押さえる 公開されている他社の方針を参考にするのも良い ただし、意味も分からずにコピペはNG目的が明確になると、手段と目的の混同を避けられる 「基準を満たすこと」は最終目的ではないはず189
「基準を満たすこと」が目的になると……190
注意を要する要件191
注意を要する要件アクセシビリティ方針が明確にできても、その方針を守ることができるかは別の話サイトに求められる要件の中には、注意が必要なものもある アクセシビリティが確保できないもの アクセシビリティ確保のためにコストがかかるもの192
CAPTCHA193
ブラウザやOSの機能への干渉194
動画195
紙媒体用のコンテンツ196
方針があると?方針を前提にすることで、要件の可否を判断することができる アクセスできなくなるような要件を入れない コストがかかりそうな要件があるときはコストを見積もっておくことができるようになるこれらは後からの対応ではどうにもならない197
まとめ
文字サイズ変更ボタンはなくてもいい!さらにもっと大切なことがある!もう一度199
実装で重要なのは「マシンリーダビリティ」アクセスできる！ テキストが明確 ちゃんとマークアップされているアクセスできない！ テキストが存在しない、あいまい ちゃんとマークアップされてない200
設計や企画時の配慮も重要わかりやすいテキストを設計しよう わかりやすいラベルは誰にとっても有用 ナビゲーションやリンクやフォームの設計時に少し気をつけるだけでグッと良くなる方針を立ててみよう 何のために、何を、どこまでやるのか? 製作の前（発注前、提案時、受注後）に考えよう201
どのプロセスにもポイントがある実は「設計」が重要 テキストが存在しなければマークアップできないさらに「戦略」「要件」も重要 最初から考えないと、あとで大変になる202
Webに関わるどんな人にもできることがあるWebに関わる全ての人に関係がある203
何かを付け足すのではなく当たり前のことを真っ当にやることが重要実は特別なことではない204
さあ、はじめよう!205
デザイニングWebアクセシビリティ206
ありがとうございました
magi1125
kneath
ufuk
shlominoach
malarkey
aleyda
dotmariusz
marcelosomers
lara
iamctodd
geeforr
nonsquared
keathley