防不け不不帯け不不不 - Moriya...2017/07/31 · - 3 - 始課市空野実空実空計現 空空空空,計,計,計,計空空空空 空野実空空野実空空野実空きききき現空状現空現空状状
実はできている!? Webアクセシビリティ2
-
date post
16-Jan-2017 -
Category
Design
-
view
653 -
download
1
Transcript of 実はできている!? Webアクセシビリティ2
![Page 1: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/1.jpg)
実はできている!?Webアクセシビリティ2~企画・要件・設計編~
![Page 2: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/2.jpg)
注意事項
会場は禁煙です。喫煙所が地下一階にありますのでご利用ください。
ハッシュタグは#a11ybooks となります。
イベントの模様は自由に撮影いただき、ブログやSNS等で拡散いただいて構いません(むしろお願いします)。主催者も、公式Facebookページ用に写真撮影をいたします(ご了承ください)
スライドの公開は主催者よりSNSなどでご案内します。
2
![Page 3: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/3.jpg)
本日の流れ
自己紹介
前回のおさらい
アクセシビリティだと思っていたが……?
気づかないうちにアクセシビリティを確保していた!
3
![Page 4: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/4.jpg)
自己紹介
4
![Page 5: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/5.jpg)
BA
5
![Page 6: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/6.jpg)
ウェブアクセシビリティ基盤委員会(WAIC)
6
![Page 7: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/7.jpg)
デザイニングWebアクセシビリティ
7
![Page 8: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/8.jpg)
前回のおさらい
![Page 9: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/9.jpg)
アクセシビリティに配慮
と言われたとき、何を思い浮かべますか?
アクセシビリティに配慮したサイトとは?
9
![Page 10: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/10.jpg)
福岡県大野城市
10
![Page 11: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/11.jpg)
文字サイズ変更ボタン・色反転ボタン
11
![Page 12: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/12.jpg)
2.1.4. ウェブアクセシビリティ対応に関する誤解
12
![Page 13: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/13.jpg)
2.1.4. ウェブアクセシビリティ対応に関する誤解
注意点!
ホームページ等において、音声読み上げ、文字拡大、文字色変更等の支援機能を提供する事例がありますが、これだけでは、ウェブアクセシビリティに対応しているとは言えません。
13
![Page 14: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/14.jpg)
文字サイズ変更ボタンはなくてもいい!
もっと大切なことがある!
ひとことで言うと?
14
![Page 15: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/15.jpg)
みんなの公共サイト運用ガイドライン (続き)
利用者は、多くの場合、音声読み上げソフトや文字拡大ソフトなど、自分がホームページ等を利用するために必要な支援機能を、自身のパソコン等にインストールし必要な設定を行った上で、その支援機能を活用して様々なホームページ等にアクセスしています。
15
![Page 16: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/16.jpg)
さまざまなブラウザや支援技術でアクセスできることが
重要
つまり
16
![Page 17: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/17.jpg)
重要なのは「マシンリーダビリティ」
アクセスできる! テキストが明確
ちゃんとマークアップされている
アクセスできない! テキストが存在しない、あいまい
ちゃんとマークアップされてない
17
![Page 18: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/18.jpg)
実はできていた、アクセシビリティで大切なこと
1. ページタイトルをきちんとつける
2. 階層構造に沿った見出しをつける
3. 見た目に頼り切らない
4. 画像に頼り切らない
5. キーボードだけで操作できる
18
![Page 19: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/19.jpg)
取り組むための重要なポイント
実は特別なことではない 何かを新たに付け足すのではなく、
当たり前のことを真っ当にやることが重要
実は「設計」が重要 テキストが存在しなければマークアップできない
テキストが適切でなければマークアップしてもわかりにくいまま
19
![Page 20: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/20.jpg)
つまり…
実は「戦略」「要件」が重要 何のために、何を、どこまでやるのか?
最初から考えないと、あとで大変になる
どのプロセスにもアクセシビリティのポイントがある Webに関わる全ての人に関係がある
Webに関わるどんな人にもできることがある
20
![Page 21: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/21.jpg)
気づかないうちにアクセシビリティを確保していた!
![Page 22: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/22.jpg)
「適切なテキスト」のための設計
1. 内容を推測できるカテゴリ名にする
2. わかりやすい現在地表示をつける
3. リンク先がわかるようにする
4. フォームのラベルを明確にする
5. フォームのエラーを明確にする
22
![Page 23: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/23.jpg)
内容を推測できるカテゴリ名にする
23
![Page 24: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/24.jpg)
OK: 内容を推測できるカテゴリ名にする
24
![Page 25: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/25.jpg)
OK: ルールと仕組みで一貫性を保つ
25
![Page 26: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/26.jpg)
NG: カテゴリ名がわかりにくい
26
![Page 27: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/27.jpg)
NG: ラベルがバラバラ
27
![Page 28: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/28.jpg)
わかりやすい現在地表示をつける
28
![Page 29: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/29.jpg)
OK: 一般的なわかりやすい現在地表示をつける
29
![Page 30: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/30.jpg)
OK: 一般的なわかりやすい現在地表示をつける
30
![Page 31: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/31.jpg)
NG: 現在地を把握する手段がない
31
![Page 32: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/32.jpg)
NG: 現在地の表示と間違えそうな表現がある
32
![Page 33: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/33.jpg)
注: コンテンツを邪魔しては意味がない
33
![Page 34: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/34.jpg)
リンク先がわかるようにする
34
![Page 35: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/35.jpg)
ユーザーはリンクに注目している
35
![Page 36: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/36.jpg)
OK:リンクにリンク先のタイトルを加える
36
![Page 37: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/37.jpg)
OK: 文中リンクを外に出して独立させる
37
![Page 38: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/38.jpg)
OK: 周辺のテキストをリンクに含める
38
![Page 39: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/39.jpg)
NG: ラベルがないリンク
39
![Page 40: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/40.jpg)
NG:「こちら」リンク
40
![Page 41: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/41.jpg)
NG: 「もっと読む」「詳細」リンク
41
![Page 42: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/42.jpg)
フォームのラベルを明確にする
42
![Page 43: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/43.jpg)
OK: 具体的で明確なラベルをつける
43
![Page 44: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/44.jpg)
OK: 必須項目を明確にする
44
![Page 45: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/45.jpg)
OK: 必要に応じて説明をつける
45
![Page 46: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/46.jpg)
OK: プレースホルダをラベル代わりにしない
46
![Page 47: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/47.jpg)
NG: ラベルや説明があいまいで混乱する
47
![Page 48: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/48.jpg)
NG: 必須か任意かがわからない
48
![Page 49: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/49.jpg)
NG: 必要な説明がなく、入力の条件がわからない
49
![Page 50: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/50.jpg)
NG: ラベルがなく、入力欄が何なのかわからない
50
![Page 51: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/51.jpg)
フォームのエラーを明確にする
51
![Page 52: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/52.jpg)
OK: エラー箇所を明確に示す
52
![Page 53: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/53.jpg)
OK: エラー表示と修正フォームをセットにする
53
![Page 54: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/54.jpg)
OK: エラー理由と修正方法を明示する
54
![Page 55: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/55.jpg)
NG: エラー箇所がわからず修正できない
55
![Page 56: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/56.jpg)
NG: エラー表示画面と入力画面がわかれている
56
![Page 57: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/57.jpg)
NG: エラーメッセージが理解できず修正できない
57
![Page 58: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/58.jpg)
アクセシビリティだと思っていたが……?
![Page 59: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/59.jpg)
プロジェクトの最初から「アクセシビリティを
どうするか?」を決めておくべし
ちゃんとやるには「アクセシビリティ方針」
59
![Page 60: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/60.jpg)
方針がないと……
60
![Page 61: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/61.jpg)
方針がないとどうなる?
配慮が全く行われない 公開に実は必要だったとなっても後の祭り
適切な判断ができない 判断がぶれる、人によって判断が異なる
合意形成ができない、覆る プロジェクト内、あるいはクライアントとの衝突
61
![Page 62: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/62.jpg)
方針がないとまったくアクセスできなくなる
危険性も出てくる!
矛盾する要件
62
![Page 63: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/63.jpg)
CAPTCHA
63
![Page 64: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/64.jpg)
ブラウザやOSの機能への干渉
64
![Page 65: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/65.jpg)
動画
65
![Page 66: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/66.jpg)
紙媒体用のコンテンツ
66
![Page 67: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/67.jpg)
基準を満たさないコンテンツを削除
67
![Page 68: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/68.jpg)
まずは最低限の方針を立てよう
68
![Page 69: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/69.jpg)
無理のない範囲で
69
![Page 70: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/70.jpg)
明確に定める
ガイドラインに沿って目標とするレベルを決める 特にアクセシビリティが重要ならレベルAA
適用範囲、期限などをはっきりさせる 基本的にはサイト全体、公開時に対応でよい
例外ができてしまう場合は明確にする
70
![Page 71: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/71.jpg)
各種ガイドラインを参考に
制作プロセスに関するガイドライン ウェブアクセシビリティ方針策定ガイドライン
JIS X 8341-3:2016 対応発注ガイドライン
JIS X 8341-3:2016 試験実施ガイドライン
※「ウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン」は「準拠」の表記に関するもので、これら全てに関連する
71
![Page 72: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/72.jpg)
方針をいつ立てるのか?
発注のパターンによって異なる 方針を先に考えてあるパターン
自分たちで決めておく or 外部発注で決める
制作発注と同時に方針も考えるパターン
方針がないまま進んでしまうパターン
72
![Page 73: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/73.jpg)
プロジェクトの流れ(受託まで)
73「ウェブの仕事力が上がる標準ガイドブック 3 Webディレクション」より
![Page 74: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/74.jpg)
方針を先に考えてあるパターン
74
ウェブアクセシビリティ方針策定ガイドライン
JIS X 8341-3:2016 対応発注ガイドライン
アクセシビリティ
方針策定
RFP作成
![Page 75: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/75.jpg)
制作発注と同時に方針も考えるパターン
75
ウェブアクセシビリティ方針策定ガイドライン
JIS X 8341-3:2016 対応発注ガイドライン
要件定義
![Page 76: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/76.jpg)
方針があればそれでいいのか?
方針があっても、適切でないものだと効果を発揮しない あいまいな方針を立ててしまう
誤解に基づいて方針を立ててしまう
手段が目的になってしまう
76
![Page 77: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/77.jpg)
実際にあったこんな発注
77
あまり良くない例
![Page 78: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/78.jpg)
あいまいな方針を立ててしまうケース
78
![Page 79: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/79.jpg)
79
セキュリティ、Web標準、
アクセシビリティに配慮し
制作すること。
実例
![Page 80: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/80.jpg)
勢いはあるが……
具体的に何をどうすれば良いのかからない 「配慮する」といっても人によって基準がまちまち
80
![Page 81: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/81.jpg)
81
JIS X8341-3:2010に基づく
アクセシビリティを
確保すること。
実例
![Page 82: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/82.jpg)
82
アクセシビリティについては
「JIS X 8341-3:2010」に
準拠すること。
実例
![Page 83: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/83.jpg)
JISに沿うことはわかるが……
目標とするレベルが不明 たとえばAAの達成基準を
満たすべきなのかどうかわからない
83
![Page 84: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/84.jpg)
誤解に基づいて方針を立ててしまうケース
84
![Page 85: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/85.jpg)
85
文字拡大機能
ブラウザの機能ではなく、
ページ上のボタンをクリックすることで
CSS を切り替え処理等により容易に
文字サイズを変更できるようにすること。
サイズについては3サイズ程度
選択できるようにすること。
実例
![Page 86: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/86.jpg)
その結果
86
![Page 87: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/87.jpg)
手段が目的になってしまうケース
87
![Page 88: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/88.jpg)
88
以下ランキング同業種内1位評価獲得
• 全上場企業ホームページ充実度ランキング調査
• IRサイト総合ランキング
• 主要企業Webユーザビリティランキング
• インターネットIR表彰
実例
![Page 89: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/89.jpg)
ランキング対策の「アクセシビリティ対応」
89
![Page 90: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/90.jpg)
実際にあったこんな発注
90
なかなか良いと思える例
![Page 91: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/91.jpg)
アクセシビリティについては
「JIS X 8341-3:2010」に準拠すること。
達成等級は以下の通り:
達成等級AA 準拠
91
実例
![Page 92: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/92.jpg)
表記ウェブアクセシビリティ方針の提示又は公開
目標とする適合レベルの達成基準の試験結果
追加表記事項
準拠 必須試験を実施し、達成基準を全て満たしていることを確認
なし
一部準拠 必須試験を実施し、達成基準の一部を満たしていることを確認
今後の対応方針部分適合に関する記述(適用する場合)
配慮 必須 試験の実施の有無、結果は問わない
目標とした適合レベル又は参照した達成基準一覧
ただし…… 「準拠」の意味、分かっていますか?
92
![Page 93: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/93.jpg)
アクセシビリティ、
ユーザビリティについて、
弊社のレベルを考慮いただき
準拠基準をご提案ください。
93
実例
![Page 94: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/94.jpg)
「 JIS X 8341-3:2010」 の「等級A」への
準拠を検討しているが、本方針は
要件定義工程でのWEBサイト検討状況を
踏まえ決定する想定です。
アクセシビリティ方針の検討方法についても
ご提案ください。
94
実例
![Page 95: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/95.jpg)
制作と合わせて方針の提案も求めるパターン
95
ウェブアクセシビリティ方針策定ガイドライン
JIS X 8341-3:2016 対応発注ガイドライン
提案書作成
RFP作成
![Page 96: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/96.jpg)
制作と合わせて方針の提案も求めるパターン
方針や策定プロセスも提案してもらえばよい あいまいに書くよりも、ずっと良いアプローチ
受注側の力量が問われる
96
![Page 97: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/97.jpg)
目的もドキュメント化しよう
97
![Page 98: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/98.jpg)
ヤフー株式会社 ウェブアクセシビリティ方針
98
![Page 99: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/99.jpg)
目的もドキュメント化しよう
なぜアクセシビリティに取り組むかを明文化 何のためのアクセシビリティなのかを押さえる
公開されている他社の方針を参考にするのも良い
ただし、意味も分からずにコピペはNG
99
![Page 100: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/100.jpg)
まとめ
![Page 101: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/101.jpg)
取り組むための重要なポイント
わかりやすいテキストを設計しよう わかりやすいラベルは誰にとっても有用
ナビゲーションやリンクやフォームの設計時に少し気をつけるだけでグッと良くなる
方針を立ててみよう 何のために、何を、どこまでやるのか?
製作の前(発注前、提案時、受注後)に考えよう
101
![Page 102: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/102.jpg)
取り組むための重要なポイント
実は特別なことではない 何かを新たに付け足すのではなく「やはり」
当たり前のことを真っ当にやることが重要
どのプロセスにもアクセシビリティのポイントがある Webに関わる全ての人に関係がある
Webに関わるどんな人にもできることがある
102
![Page 103: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/103.jpg)
さあ、はじめよう!
103
![Page 104: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/104.jpg)
さあ、はじめよう!
104
![Page 105: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/105.jpg)
デザイニングWebアクセシビリティ
105
![Page 106: 実はできている!? Webアクセシビリティ2](https://reader034.fdocument.pub/reader034/viewer/2022042611/587bddac1a28ab834d8b6ccd/html5/thumbnails/106.jpg)
ありがとうございました