第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
•9 likes•2,201 views
Download to read offline
Report
2015-04-26（日）に京都コワーキングスペースcotoにて行われた「第5回 D2D アクセシビリティ勉強会」でのスライドです。
Recommended
More Related Content
What's hot
What's hot(20)
Viewers also liked
Viewers also liked(7)
Similar to 第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Similar to 第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」(20)
More from Nozomi Sawada
More from Nozomi Sawada(13)
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
- 2. 2 自己紹介
- 3. 3 SAWADA STANDARD DESIGN 澤田 望 @SawadaStdDesign WAIC WG2委員（2011年〜） キヤノンサイトのデザイン監修／運用（〜2013年） 2014年、岡山で独立
- 4. 4 今回の目標
- 12. 12 誰と共有するのか？ にもよります。 • ディレクター • デザイナー • プログラマー • クライアント
- 15. 15 • ウェブアクセシビリティ方針の策定 達成等級：A／AA／AAA 依存する技術：HTML／CSS／JavaScript など その技術を使用しなければ実現できないコンテンツか？ JIS X 8341-3:2010対応するなら → 準備が必要
- 22. 22 読み順：F字の法則 ／ 左→右 ／ 上→下 <img> <h2> <p> <img> <p> <h3> <h3> 1 2 3
- 23. 23 前へ ＞＜ 次へ ＜ 進む 戻る ＞ 気持ち悪い？
- 24. 24 前へ：左 ／ 次へ：右 （経験則に基づく） 次へ ＞＜ 前へ ＜ 戻る 進む ＞
- 27. 27 •知覚可能 順序通り、欠落なく読めるレイアウト •操作可能 •理解可能 一貫したナビゲーション／ラベル／名前 •頑健性 （各コンテンツのアクセシビリティはデザイン〜マークアップ時に考慮）
- 28. 28 JIS X 8341-3:2010 達成等級Aの 達成基準を満たすために必要なこと
- 30. 30 JIS X 8341-3:2010 達成等級Aの達成基準には 直接影響ない範囲でのアクセシビリティ
- 31. 31 •7.1.4.4 テキストのサイズ変更 (AA) G146: リキッドレイアウトを用いる リキッドじゃなくてもいいから、 文字を200%まで拡大しても破綻しないレイアウト。
- 32. 32 •7.3.2.3 一貫したナビゲーション (AA) G61 繰り返されるコンポーネントが表示されるたびに、 それを相対的に同じ順序で提示する
- 33. 33 •7.3.2.4 一貫した識別性 (AA) G197 同じ機能を有するコンテンツに対して、 一貫したラベル、識別名及び代替テキストを用いる。
- 39. 39 レイアウトするもの •D2Dロゴ •メインビジュアル（タイトル／キャッチコピー） •ナビゲーション（ページ内リンク） •about（D2Dについて：テキスト／写真） •活動報告（参加者の声：テキスト／写真） •ブログへのリンク（テキスト／ボタン or バナー） •コンタクト（入力フォーム） • SNSシェアボタンは必須ではない。設置するならキーボード操作可能に／文法的に正しく。
- 40. 40 では、制作開始！
- 42. 42 2時間で作ってもらいます。
- 44. 44 •知覚可能 知覚できる色／形状／レイアウト •操作可能 操作を妨げない動き／点滅／スクロール •理解可能 一貫した識別性 •頑健性 （マークアップ時に考慮するものもある）
- 45. 45 中でも特に •知覚可能 affordanceの延長として考える。 【 afford 】 与える／もたらす 【 affordance 】 環境や物体が与える意味や価値 「押すドア／引くドア」 「押せる感のあるボタン」など ↓ 要素の意味を伝えるデザインが重要 （コンテキストも影響）
- 46. 46 JIS X 8341-3:2010 達成等級Aの 達成基準を満たすために必要なこと
- 47. 47 •7.1.3.1 情報及び関係性 G117 フォントの種類や形状で伝えている情報をテキストでも伝える。 例）文中で 取消線を引いた削除部分 を別途「変更履歴」に。 G138 色で情報を伝えている場合、セマンティックなマークアップ（例： em、strong）を用いる。 ※strong要素はAS情報的には微妙... 例）赤文字で強調 例）ウェブフォントの違い
- 49. 49 •7.1.4.1 色の使用 G14／G122 色だけでなくテキストでも伝える。 例）入力フォームの必須項目（赤字だけじゃなく「必須」） G182 テキスト色の違いだけでなく視覚的な手がかり（大きさ／太さ／斜体 など）でも伝える。 例）文中のテキストリンクは色＋下線 濃淡差／反転表示（印刷注意）／形状の違いも有効 G111 色とパターンを併用する。 例）グラフ ナビゲーションならアイコンも有効
- 50. 50 •7.2.2.2 一時停止、停止、非表示 G4／G11／G187／G152／G186／G191 動き／点滅／スクロールし ている情報が、(1) 自動的に開始し、(2) 5秒以上続き、(3) 他コンテンツ と並行して提示される場合、利用者がそれらを一時停止、停止、非表示に できる。 ただし、動き／点滅／スクロールが必要不可欠な場合は除く。 例）カルーセル
- 52. 52 •7.3.3.2 ラベル又は説明文 G89 データ形式／入力例を提供する。 例）全角カナ（サワダ） G184 フォーム又はテキストフィールド一式の先頭で、必須項目に関する 説明文を提供する。 G162 入力項目とラベルの関係がよく分かるように配置する。 ※ 離れていると弱視の利用者に問題。 変化に気づかせる設計。 そもそも入力欄だと分かるデザインになっているか？
- 53. 53 JIS X 8341-3:2010 達成等級Aの達成基準には 直接影響ない範囲でのアクセシビリティ
- 54. 54 •7.1.4.3 最低限のコントラスト (AA) 小さい文字（18（日本語は22）ポイント未満、太字は14（日本語は18）ポイ ント未満）の場合： G18: テキスト（及び文字画像）とその背景の間に、 4.5：1以上のコントラスト比が必要 大きい文字（18（日本語は22）ポイント以上、太字は14（日本語は18）ポイ ント以上）の場合： G145: テキスト（及び文字画像）とその背景の間に、 3：1以上のコントラスト比が必要 例外：アクティブではないボタンなど／装飾／誰も視覚的に確認できない／写真の 一部分のテキスト／ロゴタイプなど
- 55. 55 •コントラスト比を計るツール • Colour Contrast Analyser（http://www.paciellogroup.com/resources/contrastanalyser/） • Color Contrast Checker（http://webaim.org/resources/contrastchecker/） • checkmycolours（http://www.checkmycolours.com） •シミュレーションツール • Web Accessibility Toolbar（http://www.infoaxia.com/） • Photoshop／Illustrator CS4以降（ビュー／校正設定） • 色のシミュレータ（http://asada.tukusi.ne.jp/websimulator/） • Sim Daltonism（https://itunes.apple.com/ca/app/sim-daltonism/id693112260） ※ モノクロにしてみるのも手っ取り早い。
- 57. 57 •7.2.4.7 視覚的に認識可能なフォーカス: (AA) G149／C15／G165／G195 フォーカスインジケータを消さない。 例） → → a { outline: none; } → ×
- 58. 58 •7.3.2.4 一貫した識別性: (AA) G197 同じ機能を有するコンテンツに対して、一貫したラベル、識別名及 び代替テキストを用いる。 アイコンの形状や矢印の向きも同じこと （アイコンの可読性にも注意） マップ ⦿ マップ ⚑ マップ ♨
- 60. 60 •フォントフェイスによる可読性の違い ヒラギノ明朝 ヒラギノ角ゴ UD新ゴ WebフォントでUDフォントが使用可能なサイト モリサワ （http://typesquare.com） fonts.com （http://www.fonts.com/ja） FONTPLUS （http://webfont.fontplus.jp） amanaimages （http://amanaimages.com/font/web/） フォントサイズによる可読性にも注意
- 61. 61 •見出しの大小関係 文書構造を理解できる見出しのデザイン ♨ h2見出しh2見出しh2見出しh2見出し ♥ h3見出しh3見出しh3見出しh3見出し ◉ h2見出しh2見出しh2見出しh2見出し ● h3見出しh3見出しh3見出しh3見出し h2見出しh2見出しh2見出し h3見出しh3見出しh3見出しh3見出し
- 62. 62 •ナビゲーションでの現在位置の表示 商品情報 > サービス v イベント > SHOP INFO >
- 63. 63 脈絡もなくTipsを並べてしまいましたが . . . 「アクセシビリティ」と「ユーザビリティ」 似てるけど違う。
- 64. 64 アクセシビリティがちゃんとしてない ビジュアルデザインは、 ↓ • 見えない • 聞こえない • 使えない • 理解できない
- 65. 65 アクセシビリティがちゃんとしてない ビジュアルデザインは、 ↓ ↓ たどり着けないぜ • 見えない • 聞こえない • 使えない • 理解できない
- 66. 66 では、制作開始！
- 67. 67 ありがとうございました。