第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」

Nozomi Sawada
Nozomi SawadaDesigner at SAWADA STANDARD DESIGN
アクセシブルなワイヤーフレーム設計
〜ビジュアルデザイン
2015年4月26日
第5回 D2Dアクセシビリティ勉強会
2
自己紹介
3
SAWADA STANDARD DESIGN
澤田 望
@SawadaStdDesign
WAIC WG2委員(2011年〜)
キヤノンサイトのデザイン監修/運用(〜2013年)
2014年、岡山で独立
4
今回の目標
5
↑
ここの克服。
アクセシブルなマークアップは覚えたけど、
デザインするときに、
何に注意すればいいのか分からない . . .
6
実際に作ってみて覚えよう。(乱暴)
7
・ワイヤーフレーム設計
・ビジュアルデザイン それぞれで、
アクセシブルにするためのポイントを覚えられる
. . . はず。
8
第1部・ワイヤーフレームの設計
9
20分で(笑)作ってもらいます。
10
ツールは何でもいいです(今回は)。
•手書き
•Illustrator
•PowerPoint
•Excel
•Cacoo(https://cacoo.com)
•Moqups(https://moqups.com)
などなど
11
ただし、できるだけ
最終的なデザイン制作に使わないツールを使うこと。
ビジュアルデザインの要素を排除して構造を考えるため。
12
誰と共有するのか? にもよります。
• ディレクター
• デザイナー
• プログラマー
• クライアント
13
ワイヤーフレーム作る前の準備
(本来は情報設計が完了した後にワイヤーのはず)
14
•サイト(ページ)の目的
再認識(誰/ゴール/手段)
•サイト構造
サイトマップ(今回は1ページだけ)
ページ/コンテンツの細分化
•コンテンツの優先順位/ストーリー
何を見せたいか、よりも
何を見せなければならないか?
求められているのは何か?
いったんリニアライズして考える。
→ 最終的に読み上げの順序と深く関わる。
15
• ウェブアクセシビリティ方針の策定
達成等級:A/AA/AAA
依存する技術:HTML/CSS/JavaScript など
その技術を使用しなければ実現できないコンテンツか?
JIS X 8341-3:2010対応するなら → 準備が必要
16
本題:ワイヤーフレームを使って何を設計するのか?
17
•文書構造(大まかな)
見出し/段落/箇条書き/表/画像など
意味合いの変わるエリアには見出しを。
(スクリーンリーダーは<div><section>の区別をデフォルトでは読み上げない)
•ナビゲーション
表示項目/ラベル/表示方式/動作
18
•レイアウト
位置/面積/サイト共通エリア/個別エリア
CSSで無理をしなくて済むよう、文書構造/コンテンツの優先順位に従っ
た順序と面積。
位置ではなく順序。(出来る限りシングルカラムで考える)
19
見た目で文書構造が分かる?
<h2>
<img>
<p>
<h2>
<p>
<img>
20
これなら分かる
<h2>
<img><p>
<h2>
<p><img>
21
こうかも知れない
<h2>
<img><p>
<h2>
<p><img>
22
読み順:F字の法則 / 左→右 / 上→下
<img>
<h2>
<p>
<img> <p>
<h3>
<h3>
1
2
3
23
前へ >< 次へ
< 進む 戻る >
気持ち悪い?
24
前へ:左 / 次へ:右 (経験則に基づく)
次へ >< 前へ
< 戻る 進む >
25
•コンテンツのボリューム
文字数/行数/画像サイズ/画像枚数/固定コンテンツ/可変コンテンツ
•コンテンツの動作(必要に応じて)
カルーセル/モーダルダイアログ/動的なサイズやレイアウト変更
•マルチデバイス対応(必要に応じて)
RWD/レイアウト変更?/画像サイズ/文字サイズ
26
ワイヤーフレーム設計する上でも、
アクセシビリティの基本は変わりません。
27
•知覚可能 順序通り、欠落なく読めるレイアウト
•操作可能
•理解可能 一貫したナビゲーション/ラベル/名前
•頑健性
(各コンテンツのアクセシビリティはデザイン〜マークアップ時に考慮)
28
JIS X 8341-3:2010 達成等級Aの
達成基準を満たすために必要なこと
29
•7.1.3.2 意味のある順序
G57 コンテンツを意味のある順序で並べる
cssオフでも意味が通じる順序で並べる。
30
JIS X 8341-3:2010 達成等級Aの達成基準には
直接影響ない範囲でのアクセシビリティ
31
•7.1.4.4 テキストのサイズ変更 (AA)
G146: リキッドレイアウトを用いる
リキッドじゃなくてもいいから、
文字を200%まで拡大しても破綻しないレイアウト。
32
•7.3.2.3 一貫したナビゲーション (AA)
G61 繰り返されるコンポーネントが表示されるたびに、
それを相対的に同じ順序で提示する
33
•7.3.2.4 一貫した識別性 (AA)
G197 同じ機能を有するコンテンツに対して、
一貫したラベル、識別名及び代替テキストを用いる。
34
•言葉/ラベルの統一
特にナビゲーション/リンク
ラベルが理解できない → たどり着けないぜ
35
地図
アクセス
ルート
ご利用案内
交通案内
SHOP INFO
マップ
36
大事なのは一貫性。
表記統一チェックツールもある。
http://www.justsystems.com/jp/products/justright/
37
では、実際に作るページについて
38
前提:1ページに複数コンテンツをレイアウトする。
例)2014宝塚映画祭(http://2014.takarazukaeiga.com/)
39
レイアウトするもの
•D2Dロゴ
•メインビジュアル(タイトル/キャッチコピー)
•ナビゲーション(ページ内リンク)
•about(D2Dについて:テキスト/写真)
•活動報告(参加者の声:テキスト/写真)
•ブログへのリンク(テキスト/ボタン or バナー)
•コンタクト(入力フォーム)
• SNSシェアボタンは必須ではない。設置するならキーボード操作可能に/文法的に正しく。
40
では、制作開始!
41
第2部・ビジュアルデザインの制作
42
2時間で作ってもらいます。
43
ビジュアルデザインを制作する上でも、
アクセシビリティの基本は変わりません。
44
•知覚可能 知覚できる色/形状/レイアウト
•操作可能 操作を妨げない動き/点滅/スクロール
•理解可能 一貫した識別性
•頑健性
(マークアップ時に考慮するものもある)
45
中でも特に
•知覚可能 affordanceの延長として考える。
【 afford 】 与える/もたらす
【 affordance 】 環境や物体が与える意味や価値
「押すドア/引くドア」
「押せる感のあるボタン」など
↓
要素の意味を伝えるデザインが重要
(コンテキストも影響)
46
JIS X 8341-3:2010 達成等級Aの
達成基準を満たすために必要なこと
47
•7.1.3.1 情報及び関係性
G117 フォントの種類や形状で伝えている情報をテキストでも伝える。
例)文中で 取消線を引いた削除部分 を別途「変更履歴」に。
G138 色で情報を伝えている場合、セマンティックなマークアップ(例:
em、strong)を用いる。
※strong要素はAS情報的には微妙...
例)赤文字で強調
例)ウェブフォントの違い
48
•7.1.3.3 感覚的な特徴(形、大きさ、視覚的な位置、方向、又は音)
G96 感覚的な特徴だけなく、テキストでも情報を伝える。
例)右の大きな丸いボタン
↓
右の大きな丸い「実行」ボタン
実行
49
•7.1.4.1 色の使用
G14/G122 色だけでなくテキストでも伝える。
例)入力フォームの必須項目(赤字だけじゃなく「必須」)
G182 テキスト色の違いだけでなく視覚的な手がかり(大きさ/太さ/斜体
など)でも伝える。
例)文中のテキストリンクは色+下線
濃淡差/反転表示(印刷注意)/形状の違いも有効
G111 色とパターンを併用する。
例)グラフ
ナビゲーションならアイコンも有効
50
•7.2.2.2 一時停止、停止、非表示
G4/G11/G187/G152/G186/G191 動き/点滅/スクロールし
ている情報が、(1) 自動的に開始し、(2) 5秒以上続き、(3) 他コンテンツ
と並行して提示される場合、利用者がそれらを一時停止、停止、非表示に
できる。
ただし、動き/点滅/スクロールが必要不可欠な場合は除く。
例)カルーセル
51
•7.2.3.1 3回の閃光又は閾値以下
1秒間に3回以上点滅させない。
動画/アニメーションを仕込む場合
画面の一部でも
52
•7.3.3.2 ラベル又は説明文
G89 データ形式/入力例を提供する。
例)全角カナ(サワダ)
G184 フォーム又はテキストフィールド一式の先頭で、必須項目に関する
説明文を提供する。
G162 入力項目とラベルの関係がよく分かるように配置する。
※ 離れていると弱視の利用者に問題。
変化に気づかせる設計。
そもそも入力欄だと分かるデザインになっているか?
53
JIS X 8341-3:2010 達成等級Aの達成基準には
直接影響ない範囲でのアクセシビリティ
54
•7.1.4.3 最低限のコントラスト (AA)
小さい文字(18(日本語は22)ポイント未満、太字は14(日本語は18)ポイ
ント未満)の場合:
G18: テキスト(及び文字画像)とその背景の間に、
4.5:1以上のコントラスト比が必要
大きい文字(18(日本語は22)ポイント以上、太字は14(日本語は18)ポイ
ント以上)の場合:
G145: テキスト(及び文字画像)とその背景の間に、
3:1以上のコントラスト比が必要
例外:アクティブではないボタンなど/装飾/誰も視覚的に確認できない/写真の
一部分のテキスト/ロゴタイプなど
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)
※ モノクロにしてみるのも手っ取り早い。
56
背景のグラデーションはコントラストに注意
見出し見出し見出し見出し
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
見出し見出し見出し見出し
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
本文本文本文本文本本文本文本文本文本文本文本本文本文本文
←ここはよくても
←ここがダメ
section毎に背景色にグラデーションを引いている例
57
•7.2.4.7 視覚的に認識可能なフォーカス: (AA)
G149/C15/G165/G195 フォーカスインジケータを消さない。
例) →
→
a { outline: none; } → ×
58
•7.3.2.4 一貫した識別性: (AA)
G197 同じ機能を有するコンテンツに対して、一貫したラベル、識別名及
び代替テキストを用いる。
アイコンの形状や矢印の向きも同じこと
(アイコンの可読性にも注意)
マップ ⦿ マップ ⚑ マップ ♨
59
その他、JISに関わらないアクセシビリティ
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
•見出しの大小関係
文書構造を理解できる見出しのデザイン
♨ h2見出しh2見出しh2見出しh2見出し
♥ h3見出しh3見出しh3見出しh3見出し
◉ h2見出しh2見出しh2見出しh2見出し
● h3見出しh3見出しh3見出しh3見出し
h2見出しh2見出しh2見出し
h3見出しh3見出しh3見出しh3見出し
62
•ナビゲーションでの現在位置の表示
商品情報 > サービス v イベント > SHOP INFO >
63
脈絡もなくTipsを並べてしまいましたが . . .
「アクセシビリティ」と「ユーザビリティ」
似てるけど違う。
64
アクセシビリティがちゃんとしてない
ビジュアルデザインは、
↓
• 見えない
• 聞こえない
• 使えない
• 理解できない
65
アクセシビリティがちゃんとしてない
ビジュアルデザインは、
↓
↓
たどり着けないぜ
• 見えない
• 聞こえない
• 使えない
• 理解できない
66
では、制作開始!
67
ありがとうございました。
1 of 67

Recommended

第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」 by
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」Nozomi Sawada
1.7K views41 slides
岡山で アクセシビリティ はじめよーでー by
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでーNozomi Sawada
2.4K views42 slides
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」 by
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」Nozomi Sawada
2.4K views57 slides
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 by
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」Nozomi Sawada
8.4K views43 slides
ギリギリUXD by
ギリギリUXDギリギリUXD
ギリギリUXDuenoyuuki
2.7K views36 slides
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪 by
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪Yuki Okada
4.6K views38 slides

More Related Content

What's hot

[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性 by
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性yukahatakeyama
185 views32 slides
コーディングを考慮したWebデザインガイドライン by
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインHiroyuki Makishita
188.1K views44 slides
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次 by
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次schoowebcampus
5.6K views57 slides
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮 by
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
3.4K views56 slides
重要なのはリサーチ・プランニング・プロトタイプの三本柱 by
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱Yuya Toida
8.5K views34 slides
デザイナーからみた仕事をしやすいディレクター by
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターtake-it
73.9K views53 slides

What's hot(20)

[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性 by yukahatakeyama
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama185 views
コーディングを考慮したWebデザインガイドライン by Hiroyuki Makishita
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita188.1K views
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次 by schoowebcampus
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
schoowebcampus5.6K views
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮 by schoowebcampus
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus3.4K views
重要なのはリサーチ・プランニング・プロトタイプの三本柱 by Yuya Toida
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida8.5K views
デザイナーからみた仕事をしやすいディレクター by take-it
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it73.9K views
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。 by Daisuke Koshimizu
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
Daisuke Koshimizu43K views
Webアクセシビリティが無視されすぎで気にくわない。 by uenoyuuki
Webアクセシビリティが無視されすぎで気にくわない。Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki27K views
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト by Yuya Toida
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida2.2K views
あなたの価値を高めるWebアクセシビリティ by 力也 伊原
あなたの価値を高めるWebアクセシビリティあなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
力也 伊原10.9K views
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司 by schoowebcampus
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus20.6K views
デザイナーが複業でデザイナーしてる話 by Yuya Toida
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida2.8K views
聞いて覚えるマテリアルデザイン入門 by 正樹 平野
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野5.3K views
Goodpatch流、ユーザー視点のuiとデザイン設計_2013/07/24_第2回メンバーズモバイルセミナー by Members_corp
Goodpatch流、ユーザー視点のuiとデザイン設計_2013/07/24_第2回メンバーズモバイルセミナーGoodpatch流、ユーザー視点のuiとデザイン設計_2013/07/24_第2回メンバーズモバイルセミナー
Goodpatch流、ユーザー視点のuiとデザイン設計_2013/07/24_第2回メンバーズモバイルセミナー
Members_corp30K views
ワークショップとUX ――なぜ今ワークショップが重要なのか by Hitomi Yamagishi
ワークショップとUX ――なぜ今ワークショップが重要なのかワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi4.3K views
アクセシビリティとこれからのWebデザイン by 力也 伊原
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原24.8K views
プロトタイピングツール投入のケーススタディ by 力也 伊原
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原2K views
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み by Yuya Toida
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida3.9K views
ノンデザイナーのためのWebデザイン講座 by 光利 吉田
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田5.8K views
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック by Akiko Kurono
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono31.2K views

Viewers also liked

遅くはない!今から始めるアクセシビリティ by
遅くはない!今から始めるアクセシビリティ遅くはない!今から始めるアクセシビリティ
遅くはない!今から始めるアクセシビリティmilk54
1.1K views36 slides
アクセシビリティとは - What Accessibility by
アクセシビリティとは - What Accessibilityアクセシビリティとは - What Accessibility
アクセシビリティとは - What Accessibilitymilk54
2K views26 slides
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」 by
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」Nozomi Sawada
2.9K views94 slides
アクセシビリティとは - Whataccessibility kobe Version by
アクセシビリティとは - Whataccessibility kobe Versionアクセシビリティとは - Whataccessibility kobe Version
アクセシビリティとは - Whataccessibility kobe Versionmilk54
983 views34 slides
ワークショップ間違いさがし - Spot the Difference 2016 by
ワークショップ間違いさがし - Spot the Difference 2016ワークショップ間違いさがし - Spot the Difference 2016
ワークショップ間違いさがし - Spot the Difference 2016milk54
1.4K views17 slides
ココが変わった!JIS X 8341-3:2016 徹底解説 by
ココが変わった!JIS X 8341-3:2016 徹底解説ココが変わった!JIS X 8341-3:2016 徹底解説
ココが変わった!JIS X 8341-3:2016 徹底解説Web Accessibility Infrastructure Committee (WAIC)
5K views58 slides

Viewers also liked(7)

遅くはない!今から始めるアクセシビリティ by milk54
遅くはない!今から始めるアクセシビリティ遅くはない!今から始めるアクセシビリティ
遅くはない!今から始めるアクセシビリティ
milk541.1K views
アクセシビリティとは - What Accessibility by milk54
アクセシビリティとは - What Accessibilityアクセシビリティとは - What Accessibility
アクセシビリティとは - What Accessibility
milk542K views
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」 by Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada2.9K views
アクセシビリティとは - Whataccessibility kobe Version by milk54
アクセシビリティとは - Whataccessibility kobe Versionアクセシビリティとは - Whataccessibility kobe Version
アクセシビリティとは - Whataccessibility kobe Version
milk54983 views
ワークショップ間違いさがし - Spot the Difference 2016 by milk54
ワークショップ間違いさがし - Spot the Difference 2016ワークショップ間違いさがし - Spot the Difference 2016
ワークショップ間違いさがし - Spot the Difference 2016
milk541.4K views
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント by Nozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada2.9K views

Similar to 第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」

さあ、デザインをはじめよう。DevLOVE関西 by
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西rie05
27.2K views113 slides
プリント基板をレイアウトして発注してみようの会 Vol0 by
プリント基板をレイアウトして発注してみようの会 Vol0プリント基板をレイアウトして発注してみようの会 Vol0
プリント基板をレイアウトして発注してみようの会 Vol0Dan Imagineer
818 views35 slides
Dxライブラリテンプレート作成のすすめ by
Dxライブラリテンプレート作成のすすめDxライブラリテンプレート作成のすすめ
Dxライブラリテンプレート作成のすすめUmebosi
1.6K views20 slides
Webサイトのようには作れない!Webアプリ設計の考え方 by
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方girigiribauer
9.6K views73 slides
とにかく時間が無い案件を乗り切る画像書き出し by
とにかく時間が無い案件を乗り切る画像書き出しとにかく時間が無い案件を乗り切る画像書き出し
とにかく時間が無い案件を乗り切る画像書き出しYoshiya OKI
723 views23 slides
わたしのVisual studio環境 by
わたしのVisual studio環境わたしのVisual studio環境
わたしのVisual studio環境Keigo Ando
4.2K views28 slides

Similar to 第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」(20)

さあ、デザインをはじめよう。DevLOVE関西 by rie05
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
rie0527.2K views
プリント基板をレイアウトして発注してみようの会 Vol0 by Dan Imagineer
プリント基板をレイアウトして発注してみようの会 Vol0プリント基板をレイアウトして発注してみようの会 Vol0
プリント基板をレイアウトして発注してみようの会 Vol0
Dan Imagineer818 views
Dxライブラリテンプレート作成のすすめ by Umebosi
Dxライブラリテンプレート作成のすすめDxライブラリテンプレート作成のすすめ
Dxライブラリテンプレート作成のすすめ
Umebosi1.6K views
Webサイトのようには作れない!Webアプリ設計の考え方 by girigiribauer
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer 9.6K views
とにかく時間が無い案件を乗り切る画像書き出し by Yoshiya OKI
とにかく時間が無い案件を乗り切る画像書き出しとにかく時間が無い案件を乗り切る画像書き出し
とにかく時間が無い案件を乗り切る画像書き出し
Yoshiya OKI723 views
わたしのVisual studio環境 by Keigo Ando
わたしのVisual studio環境わたしのVisual studio環境
わたしのVisual studio環境
Keigo Ando4.2K views
作品は誰かに見てもらった方が良い! by Makiko M
作品は誰かに見てもらった方が良い!作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
Makiko M915 views
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話 by 典子 松本
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
典子 松本1.3K views
ドメイン駆動設計を実践するプログラマーの悩み by haljik Seiji
ドメイン駆動設計を実践するプログラマーの悩みドメイン駆動設計を実践するプログラマーの悩み
ドメイン駆動設計を実践するプログラマーの悩み
haljik Seiji4.6K views
「あったらいいな」を考える Roppongi designers community by Tomoko Nishina
「あったらいいな」を考える Roppongi designers community「あったらいいな」を考える Roppongi designers community
「あったらいいな」を考える Roppongi designers community
Tomoko Nishina559 views
Experience Visionのはじめかた に見るDevLOVE勉強会のススメ by 陽一 滝川
Experience Visionのはじめかた に見るDevLOVE勉強会のススメExperience Visionのはじめかた に見るDevLOVE勉強会のススメ
Experience Visionのはじめかた に見るDevLOVE勉強会のススメ
陽一 滝川1.3K views
「ドメイン駆動設計」の複雑さに立ち向かう by 増田 亨
「ドメイン駆動設計」の複雑さに立ち向かう「ドメイン駆動設計」の複雑さに立ち向かう
「ドメイン駆動設計」の複雑さに立ち向かう
増田 亨32.3K views
ABC2012 Spring: Android Design for Dummies by Nobuya Sato
ABC2012 Spring: Android Design for DummiesABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for Dummies
Nobuya Sato1.6K views
UXデザイン✕アジャイル✕受託開発 by Takuya Kitamura
UXデザイン✕アジャイル✕受託開発UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発
Takuya Kitamura3.4K views
LightSwitchで遊んでみた by Yoshitaka Seo
LightSwitchで遊んでみたLightSwitchで遊んでみた
LightSwitchで遊んでみた
Yoshitaka Seo1.1K views
プロダクトデザインと3DCAD 講義資料 by Yoichi Yamazaki
プロダクトデザインと3DCAD 講義資料プロダクトデザインと3DCAD 講義資料
プロダクトデザインと3DCAD 講義資料
Yoichi Yamazaki3K views
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ by Aimi Shinohara
デザイン系の学校に通っていない学生のためのポートフォリオことはじめデザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
Aimi Shinohara539 views
プロ用CMSフレームワークテーマ「echo」のご紹介 by Seiko Kuchida
プロ用CMSフレームワークテーマ「echo」のご紹介プロ用CMSフレームワークテーマ「echo」のご紹介
プロ用CMSフレームワークテーマ「echo」のご紹介
Seiko Kuchida3.7K views
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司 by schoowebcampus
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus274.5K views

More from Nozomi Sawada

中小企業のWebサイトでも気にしておきたいアクセシビリティ by
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティNozomi Sawada
1.9K views84 slides
「誰」が「何」をする?みんなで考えてみよう! by
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!Nozomi Sawada
564 views22 slides
UDトークで会話をアクセシブルにしてみよう by
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみようNozomi Sawada
1.5K views48 slides
色にまつわるエトセトラ(いろいろ) by
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)Nozomi Sawada
1.2K views95 slides
コントラスト高めでいこう by
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこうNozomi Sawada
2.9K views81 slides
代替テキストの基本から応用まで by
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用までNozomi Sawada
5.3K views62 slides

More from Nozomi Sawada(13)

中小企業のWebサイトでも気にしておきたいアクセシビリティ by Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada1.9K views
「誰」が「何」をする?みんなで考えてみよう! by Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada564 views
UDトークで会話をアクセシブルにしてみよう by Nozomi Sawada
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada1.5K views
色にまつわるエトセトラ(いろいろ) by Nozomi Sawada
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada1.2K views
コントラスト高めでいこう by Nozomi Sawada
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこう
Nozomi Sawada2.9K views
代替テキストの基本から応用まで by Nozomi Sawada
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada5.3K views
岡山をリーダブルな世界に by Nozomi Sawada
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada725 views
こんなとき実感!代替テキストと字幕の大切さ by Nozomi Sawada
こんなとき実感!代替テキストと字幕の大切さこんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada1K views
Webアクセシビリティ 今ならどうするの? by Nozomi Sawada
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada1.3K views
第7回 okayama-js 実践 WAI-ARIA by Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIA第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada2.5K views
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと by Nozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada17.4K views
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜 by Nozomi Sawada
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada3.3K views
WAI-ARIAの考え方と使い方を整理しよう by Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada14.2K views

第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」