1. D2Dサイトをアクセシブルにマークアップ
2015年8月30日
第7回 D2Dアクセシビリティ勉強会

2. 2
自己紹介

3. 3
SAWADA STANDARD DESIGN
澤田 望
@SawadaStdDesign
WAIC WG2委員（2011年〜）
キヤノンサイトのデザイン監修／運用（〜2013年）
2014年、岡山で独立

4. 4
今回の目標

5. 5
D2Dサイトのビジュアルデザインは作った。
フォームも作った。いよいよマークアップだけ！

6. 6
今までの復習で、さくっとJIS対応してしまおう！

7. 7
マークアップを始める前に

8. 8
第5回で作成したデザインはこちら。
https://github.com/D2DRAFT/a11y5A/blob/master/design_data/index.fw.png

9. 9
今回実装してもらうのはこちら。
https://github.com/milk54/a11yd2d7/blob/master/index.png

10. 10
より実用に耐えられるように、
いくつか改善点を盛り込みました。

11. 11
各ボタン／テキストリンクにhoverのスタイルを追加
ON OFF
OFF
ON
OFF
ON
OFF
ON

12. 12
「イベント一覧」の下向き▼を横向き▶に変更
※「イベント一覧」だけページ内リンクではないので。

13. 13
別サイト用アイコンを追加

14. 14
D2Dサイトをアクセシブルに
マークアップする際のポイント

15. 15
制作プロセス
1. 前提条件の確認
2. 文書構造の作成
3. 代替コンテンツの用意
4. マークアップ

16. 16
1. 前提条件の確認
• JIS X 8341-3:2010 達成等級 A に準拠すること。
• 使用する技術：HTML5／CSS3／JavaScript
• 依存する技術：HTML5／CSS3
• 設計：アクセシビリティが確保されていること。（第5回ワイヤーフレーム）
• コンテンツ：アクセシビリティが確保されていること。（第5回デザイン）
• 入力フォーム：前回作成したものを流用。（第6回フォーム）
• 見出し：公開時にはWebフォントを使う想定。→ プレーンテキストでOK。

17. 17
2. 文書構造の作成
見た目ではなく、リニアライズして考えてみる。
→ 読み上げ順序に影響。
• ページタイトル
• 大見出し（h1）
• セクショニング
• 見出し（h2〜h6）
• 文章／段落
• 箇条書き
• 表
• 画像

18. 18
3. 代替コンテンツの用意
代替コンテンツが必要になる主なコンテンツ
• 画像（代替テキスト）
• イメージマップ（代替テキスト）
• 音声（代替テキスト）
• 動画（代替テキスト／音声ガイド）
• ライブ映像（代替テキスト）
• Flash／SVG等埋め込みオブジェクト（代替テキスト／代替画像）
• 入力フォーム（ラベル／識別名）
• CAPTCHAなどの仕掛け（別の代替手法）

19. 19
では、マークアップのポイントを上から順番に。

20. 20
「D2Draft」ロゴマーク
• 代替テキストが必要。
• 代替テキストの内容をどうするかは意見の分かれるところ。
• リンクは不要。
参考になる達成⽅方法：G94／H37

21. 21
ナビゲーション
• ラベルテキストと背景色のコントラスト。（できるだけhover時も）
• Scriptを仕込むならキーボード操作用のonfocusも忘れずに。
• キーボード操作でリンクした後にフォーカスが残らないように。
• 別サイトへのリンクであることを（代替テキストで）伝える。
• 文字サイズ拡大時に白文字がはみ出さないように。
参考になる達成⽅方法：G18／G145／H91／G90／SCR2／SCR20／SCR35／G146／G179

22. 22
キービジュアル
• キャッチコピーをどうするか？（画像化／テキスト）
• （上記をテキスト化した場合）キービジュアル自体の代替テキスト。
• 「〼」をNVDA／VoiceOverが読まない。（IE11+PC-Talker7は読む）
参考になる達成⽅方法：G18／G145／G94／H37

23. 23
活動紹介
• 写真の文書構造上の扱い。（紐付くのは活動紹介？／各イベント？）
• 写真の代替テキスト。
• 詳細ボタンはナビゲーションと同様。
• 「過去の活動はこちら」ボタンも同様。（hoverスタイル／コントラスト）
参考になる達成⽅方法：C6／G94／H37／G18／G145

24. 24
関連情報
• リンクテキストhover時のスタイル。
• 別サイトへのリンクであることを（代替テキストで）伝える。
（デザイン上支障がなければテキストで伝える方が尚良い）
参考になる達成⽅方法：H91／G90／H2

25. 25
お問い合せ
•前回の通り。（第6回「アクセシブルな入力フォームを作ろう」）
•前回の模範解答。（コピーして使ってOK）

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
個々のマークアップテクニックは、
Techniques for WCAG 2.0（達成方法集）
を参照してください。

28. 28
マークアップし終わったら、実装チェックリスト
（抜粋版）でチェックしてみてください。
便利なツールもあります。（ただしどのツールでも目視チェックは必要です）
•HTML_CodeSniffer（ブックマークレット）
•Web Accessibility Toolbar 2012J（IEのみ）
•miChecker（HTML5非対応）
•PowerCMS 8341（Movable Typeプラグイン）
•WorldSpace（大規模サイト向き）
•今すぐ使える Web アクセシビリティ・ツール総目次

29. 29
では、制作開始！（2時間）

30. 30
お疲れさまでした！

31. 31
では解答例を。
※解答例はあくまで「例」です。
達成基準が満たせるならマークアップ手法は自由です。
• プレビュー表示：https://htmlpreview.github.io/?https://github.com/milk54/
a11yd2d7/blob/master/index.html

32. 32
最後に、補足を。

33. 33
今まで、この勉強会ではJIS X 8341-3:2010へ
対応することを前提に勉強してきましたが. . .

34. 34
JIS X 8341-3:2010対応は必須ではありません！
（きっぱり）
※公共サイトを除く。

35. 35
JISは、あくまで品質の指標にすぎません。
JIS対応を「目的」にしないでね。

36. 36
サイト内の全ての情報は得られないような
「まぁ、だいたい分かる」レベルでも、
「情報が全く得られない」よりは大きな前進。

37. 37
100点満点のサイトが1つ増えることよりも、
50点のサイトが10個増えることのほうが大事。
JIS X 8341-3:2010
達成等級 A
準拠サイト
画像にAlt属性を
入れたサイト
見出しを適切に
つけたサイト
WAI-ARIAを
組み込んだサイト
フォームにラベル
をつけたサイト
動画に字幕を
つけたサイト
一貫したラベルを
つけたサイト
色のコントラスト
を高めたサイト
カルーセルに一時停止
ボタンをつけたサイト
色とパターンを
使ったサイト
<

38. 38
50点のサイトがどんどん増えれば、
生活の中で得られる情報の質と量が底上げできます。
（障害のある人もない人も）
画像にAlt属性を
入れたサイト
見出しを適切に
つけたサイト
WAI-ARIAを
組み込んだサイト
フォームにラベル
をつけたサイト
動画に字幕を
つけたサイト
一貫したラベルを
つけたサイト
色のコントラスト
を高めたサイト
カルーセルに一時停止
ボタンをつけたサイト
色とパターンを
使ったサイト
装飾画像のAlt属性
を空にしたサイト

39. 39
なので、気負わずに

40. 40
アクセシビリティで関西Web界隈の底上げをしよう！
串かつ食いたい...
たどり着けるぜ！

41. 41
ありがとうございました。