Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」

1,064 views

Published on

2015-08-30(日)に大阪JUSO Coworkingにて行われた「第7回 D2D アクセシビリティ勉強会」でのスライドです。

Published in: Internet
  • Be the first to comment

第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」

  1. 1. D2Dサイトをアクセシブルにマークアップ 2015年8月30日 第7回  D2Dアクセシビリティ勉強会
  2. 2. 2 自己紹介
  3. 3. 3 SAWADA  STANDARD  DESIGN   澤田  望   @SawadaStdDesign   WAIC  WG2委員(2011年〜)   キヤノンサイトのデザイン監修/運用(〜2013年)   2014年、岡山で独立
  4. 4. 4 今回の目標
  5. 5. 5 D2Dサイトのビジュアルデザインは作った。 フォームも作った。いよいよマークアップだけ!
  6. 6. 6  今までの復習で、さくっとJIS対応してしまおう!
  7. 7. 7 マークアップを始める前に
  8. 8. 8 第5回で作成したデザインはこちら。 https://github.com/D2DRAFT/a11y5A/blob/master/design_data/index.fw.png
  9. 9. 9 今回実装してもらうのはこちら。 https://github.com/milk54/a11yd2d7/blob/master/index.png
  10. 10. 10 より実用に耐えられるように、   いくつか改善点を盛り込みました。
  11. 11. 11 各ボタン/テキストリンクにhoverのスタイルを追加 ON OFF OFF ON OFF ON OFF ON
  12. 12. 12 「イベント一覧」の下向き▼を横向き▶に変更 ※「イベント一覧」だけページ内リンクではないので。
  13. 13. 13 別サイト用アイコンを追加
  14. 14. 14 D2Dサイトをアクセシブルに   マークアップする際のポイント
  15. 15. 15 制作プロセス 1.  前提条件の確認 2.  文書構造の作成 3.  代替コンテンツの用意 4.  マークアップ
  16. 16. 16 1.  前提条件の確認 • JIS  X  8341-3:2010  達成等級  A  に準拠すること。   • 使用する技術:HTML5/CSS3/JavaScript   • 依存する技術:HTML5/CSS3   • 設計:アクセシビリティが確保されていること。(第5回ワイヤーフレーム)   • コンテンツ:アクセシビリティが確保されていること。(第5回デザイン)   • 入力フォーム:前回作成したものを流用。(第6回フォーム)   • 見出し:公開時にはWebフォントを使う想定。→  プレーンテキストでOK。
  17. 17. 17 2.  文書構造の作成 見た目ではなく、リニアライズして考えてみる。   →  読み上げ順序に影響。   • ページタイトル   • 大見出し(h1)   • セクショニング   • 見出し(h2〜h6)   • 文章/段落   • 箇条書き   • 表   • 画像
  18. 18. 18 3.  代替コンテンツの用意 代替コンテンツが必要になる主なコンテンツ   • 画像(代替テキスト)   • イメージマップ(代替テキスト)   • 音声(代替テキスト)   • 動画(代替テキスト/音声ガイド)   • ライブ映像(代替テキスト)   • Flash/SVG等埋め込みオブジェクト(代替テキスト/代替画像)   • 入力フォーム(ラベル/識別名)   • CAPTCHAなどの仕掛け(別の代替手法)
  19. 19. 19  では、マークアップのポイントを上から順番に。
  20. 20. 20 「D2Draft」ロゴマーク • 代替テキストが必要。   • 代替テキストの内容をどうするかは意見の分かれるところ。   • リンクは不要。   参考になる達成⽅方法:G94/H37  
  21. 21. 21 ナビゲーション • ラベルテキストと背景色のコントラスト。(できるだけhover時も)   • Scriptを仕込むならキーボード操作用のonfocusも忘れずに。   • キーボード操作でリンクした後にフォーカスが残らないように。   • 別サイトへのリンクであることを(代替テキストで)伝える。   • 文字サイズ拡大時に白文字がはみ出さないように。   参考になる達成⽅方法:G18/G145/H91/G90/SCR2/SCR20/SCR35/G146/G179  
  22. 22. 22 キービジュアル • キャッチコピーをどうするか?(画像化/テキスト)   • (上記をテキスト化した場合)キービジュアル自体の代替テキスト。   • 「〼」をNVDA/VoiceOverが読まない。(IE11+PC-Talker7は読む)   参考になる達成⽅方法:G18/G145/G94/H37  
  23. 23. 23 活動紹介 • 写真の文書構造上の扱い。(紐付くのは活動紹介?/各イベント?)   • 写真の代替テキスト。   • 詳細ボタンはナビゲーションと同様。   • 「過去の活動はこちら」ボタンも同様。(hoverスタイル/コントラスト)   参考になる達成⽅方法:C6/G94/H37/G18/G145  
  24. 24. 24 関連情報 • リンクテキストhover時のスタイル。   • 別サイトへのリンクであることを(代替テキストで)伝える。    (デザイン上支障がなければテキストで伝える方が尚良い)   参考になる達成⽅方法:H91/G90/H2  
  25. 25. 25 お問い合せ •前回の通り。(第6回「アクセシブルな入力フォームを作ろう」)   •前回の模範解答。(コピーして使ってOK)
  26. 26. 26 SNSボタン/フッター • hover時のスタイル。   • 代替テキスト。   • リンク先   facebook:https://www.facebook.com/groups/192199647655920/   Twitter:https://twitter.com/search?q=%23d2draft&src=typd&lang=ja   • 文字サイズ拡大時に白文字がはみ出さないように。   参考になる達成⽅方法:H91/G90/G94/H37/G146/G179  
  27. 27. 27 個々のマークアップテクニックは、   Techniques  for  WCAG  2.0(達成方法集)   を参照してください。
  28. 28. 28 マークアップし終わったら、実装チェックリスト (抜粋版)でチェックしてみてください。 便利なツールもあります。(ただしどのツールでも目視チェックは必要です)   •HTML_CodeSniffer(ブックマークレット)   •Web  Accessibility  Toolbar  2012J(IEのみ)   •miChecker(HTML5非対応)   •PowerCMS  8341(Movable  Typeプラグイン)   •WorldSpace(大規模サイト向き)   •今すぐ使える  Web  アクセシビリティ・ツール総目次
  29. 29. 29 では、制作開始!(2時間)
  30. 30. 30    お疲れさまでした!
  31. 31. 31 では解答例を。 ※解答例はあくまで「例」です。    達成基準が満たせるならマークアップ手法は自由です。 • プレビュー表示:https://htmlpreview.github.io/?https://github.com/milk54/ a11yd2d7/blob/master/index.html
  32. 32. 32 最後に、補足を。
  33. 33. 33 今まで、この勉強会ではJIS  X  8341-3:2010へ   対応することを前提に勉強してきましたが.  .  .  
  34. 34. 34 JIS  X  8341-3:2010対応は必須ではありません!   (きっぱり) ※公共サイトを除く。
  35. 35. 35 JISは、あくまで品質の指標にすぎません。 JIS対応を「目的」にしないでね。
  36. 36. 36 サイト内の全ての情報は得られないような   「まぁ、だいたい分かる」レベルでも、    「情報が全く得られない」よりは大きな前進。
  37. 37. 37 100点満点のサイトが1つ増えることよりも、   50点のサイトが10個増えることのほうが大事。 JIS  X  8341-3:2010    達成等級  A     準拠サイト 画像にAlt属性を   入れたサイト 見出しを適切に   つけたサイト WAI-ARIAを   組み込んだサイト フォームにラベル   をつけたサイト 動画に字幕を   つけたサイト 一貫したラベルを   つけたサイト 色のコントラスト   を高めたサイト カルーセルに一時停止   ボタンをつけたサイト 色とパターンを   使ったサイト <
  38. 38. 38 50点のサイトがどんどん増えれば、   生活の中で得られる情報の質と量が底上げできます。   (障害のある人もない人も) 画像にAlt属性を   入れたサイト 見出しを適切に   つけたサイト WAI-ARIAを   組み込んだサイト フォームにラベル   をつけたサイト 動画に字幕を   つけたサイト 一貫したラベルを   つけたサイト 色のコントラスト   を高めたサイト カルーセルに一時停止   ボタンをつけたサイト 色とパターンを   使ったサイト 装飾画像のAlt属性   を空にしたサイト
  39. 39. 39 なので、気負わずに
  40. 40. 40 アクセシビリティで関西Web界隈の底上げをしよう! 串かつ食いたい... たどり着けるぜ!
  41. 41. 41    ありがとうございました。

×