Download to read offline
Uploaded byNozomi Sawada
Webアクセシビリティ 今ならどうするの？
2017-12-2（土）に高知市文化プラザかるぽーとにて行われた「WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」」でのスライドです。
Webアクセシビリティ 今ならどうするの？
- 2.
- 3.
- 4.
- 5.
- 6. 岡山で独立（2014） キヤノン （～2013） 6 • Webアクセシビリティ検証 •イラスト制作 • 岡山情報ビジネス学院 非常勤講師 • ウェブアクセシビリティ基盤委員会 などなど • サイトデザイン監修 • Webアクセシビリティ対応
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. 20 • 商品を買ってもらいたい • サービスを利用してもらいたい •会社の株を買ってもらいたい • 社員になってもらいたい ※広告は除外 Webサイトの目的（の例）
- 21. 21 • 商品を気に入ってもらいたい • サービスを気に入ってもらいたい •会社の株を気に入ってもらいたい • 社員を気に入ってもらいたい 目的を達成するには？
- 22. 22 • 商品を知ってもらいたい • サービスを知ってもらいたい •会社の株を知ってもらいたい • 社員を知ってもらいたい 目的を達成するには？ 多くの人に情報を届けたい
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. 34 • WCAG 2.0勧告から10年ぶりの更新 •勧告目標：2018年半ば • WCAG 2.0の内容は変更予定なし • ルールの追加：21 → 今までよりも条件が厳しくなる WCAG 2.1の概要（2017/11時点）
- 35. 35 • 認知障害や弱視の利用者を想定したルール追加 • モバイルや音声入力を想定したルール追加 •拡大表示：2方向へのスクロールなしで400％ • コントラスト比：図形やUIコンポーネントにも • 操作や理解の妨げとなるインタラクションの抑制 • タッチする要素：44 x 44 CSSpx以上 • デバイスのセンサーや向きだけに依存しない WCAG 2.1の主な変更点（2017/11時点）
- 36.
- 37. 37 • JIS X8341-3の更新間隔：約6年 • 次回更新：2022年？？ WCAGを採用しているグローバルな企業 →早めに影響あるかも WCAGがバージョンアップする影響
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. 46 JIS X 8341-3関連文書の翻訳を どんどん更新しています。
- 47.
- 48. 48How to MeetWCAG 2.0（WAIC） より
- 49.
- 50.
- 51.
- 52.
- 53. 53 1. ページにたどり着けるか • 適切で固有のページタイトル •「403」「404」「500」「503」はNG •適切なリンクラベル • コントラスト比が十分なナビゲーション色 （小さい文字4.5：1／大きい文字3.0：1）
- 54. • 適切な見出し • 代替コンテンツの用意（画像／音声／動画） •キーボード操作可能（見えるフォーカスインジケータ） • 200%まで文字サイズ拡大可能 54 2. コンテンツにたどり着けるか
- 55. 55 3. 読んで理解できるか • 正しい文書構造 •コントラスト比が十分なコンテンツ色 （小さい文字4.5：1／大きい文字3.0：1） • 使える入力フォーム（ラベル／必須項目／説明） • 理解できるテーブル（複雑さ／caption／見出し） • 感覚に頼らない表現（色／位置など） • 適切な内容の代替コンテンツ
- 56. 56 4. 迷わず利用できるか • メインコンテンツに移動できる（h要素） •コンテキストの変化を適切に伝える • 重複のない情報 （リンク画像の代替テキストとリンクテキストなど） • 的確なエラーメッセージ • オートスタートはNG
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.