Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 335 vues

Publié le

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

Publié dans : Internet
  • Soyez le premier à commenter

第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    ありがとうございました。

×