Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
EN
Uploaded by
Nozomi Sawada
740 views
岡山をリーダブルな世界に
2018-09-03(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/09/03」でのスライドです。
Internet
◦
Read more
2
Save
Share
Embed
Embed presentation
Download
Download to read offline
1
/ 86
2
/ 86
3
/ 86
4
/ 86
5
/ 86
6
/ 86
7
/ 86
8
/ 86
9
/ 86
10
/ 86
11
/ 86
12
/ 86
13
/ 86
14
/ 86
15
/ 86
16
/ 86
17
/ 86
18
/ 86
19
/ 86
20
/ 86
21
/ 86
22
/ 86
23
/ 86
24
/ 86
25
/ 86
26
/ 86
27
/ 86
28
/ 86
29
/ 86
30
/ 86
31
/ 86
32
/ 86
33
/ 86
34
/ 86
35
/ 86
36
/ 86
37
/ 86
38
/ 86
39
/ 86
40
/ 86
41
/ 86
42
/ 86
43
/ 86
44
/ 86
45
/ 86
46
/ 86
47
/ 86
48
/ 86
49
/ 86
50
/ 86
51
/ 86
52
/ 86
53
/ 86
54
/ 86
55
/ 86
56
/ 86
57
/ 86
58
/ 86
59
/ 86
60
/ 86
61
/ 86
62
/ 86
63
/ 86
64
/ 86
65
/ 86
66
/ 86
67
/ 86
68
/ 86
69
/ 86
70
/ 86
71
/ 86
72
/ 86
73
/ 86
74
/ 86
75
/ 86
76
/ 86
77
/ 86
78
/ 86
79
/ 86
80
/ 86
81
/ 86
82
/ 86
83
/ 86
84
/ 86
85
/ 86
86
/ 86
More Related Content
PDF
Webデザインにおけるアクセシビリティへの取組み
by
Mitsue-Links Co.,Ltd. Accessibility Department
PDF
WAI-ARIA珍プレー好プレー
by
Mitsue-Links Co.,Ltd. Accessibility Department
PDF
さぶみっとヨクスル「アオクスル」20160712
by
Kazunori Tateyama
PDF
イマドキWebメディアの制作手法
by
Keisuke Imura
PDF
「誰」が「何」をする?みんなで考えてみよう!
by
Nozomi Sawada
PDF
Webアクセシビリティの現状ダイジェスト 2014
by
Mitsue-Links Co.,Ltd. Accessibility Department
PPTX
ワードプレスとは? 竜胆(りんどう)Webデザイン
by
古川 恵子
PDF
Webディレクション講座 - 初級編 -
by
Colorkrew
Webデザインにおけるアクセシビリティへの取組み
by
Mitsue-Links Co.,Ltd. Accessibility Department
WAI-ARIA珍プレー好プレー
by
Mitsue-Links Co.,Ltd. Accessibility Department
さぶみっとヨクスル「アオクスル」20160712
by
Kazunori Tateyama
イマドキWebメディアの制作手法
by
Keisuke Imura
「誰」が「何」をする?みんなで考えてみよう!
by
Nozomi Sawada
Webアクセシビリティの現状ダイジェスト 2014
by
Mitsue-Links Co.,Ltd. Accessibility Department
ワードプレスとは? 竜胆(りんどう)Webデザイン
by
古川 恵子
Webディレクション講座 - 初級編 -
by
Colorkrew
What's hot
PDF
デザイン屋なりにいろんな人を応援してみた結果
by
Kazunori Tateyama
PDF
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
by
Saori Okayama
PDF
「おれおれサービス」に挑戦しよう
by
Hidekazu Ishikawa
PDF
Froidaleweb
by
Ai Yoshitani
PPTX
利用規約の作成は「Gozal」で簡単かつ高速
by
Motohiro Takatani
PDF
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
by
Kunitoshi Hoshino
PDF
Webアクセシビリティポリシーのつくりかた・ひろめかた
by
Kobayashi Daisuke
PDF
Web制作 あとで揉めないための確認のポイント
by
高本 徹
PDF
ウェブ制作者のためのセルフブランディング
by
Hidekazu Ishikawa
PDF
サービス業から学んだコミュニケーションのコツ
by
Yumi Masaki
PPTX
超初心者でもできた!AzureMobileService JSバージョン
by
Yuriko Kamimori
PDF
超初心者向け 無料ホームページ作成ツール Wixを学ぼう
by
Daisuke Ishii
デザイン屋なりにいろんな人を応援してみた結果
by
Kazunori Tateyama
a-blog cms 事例紹介 〜 キャッシュ機能で快適なウェブサイト表示 〜
by
Saori Okayama
「おれおれサービス」に挑戦しよう
by
Hidekazu Ishikawa
Froidaleweb
by
Ai Yoshitani
利用規約の作成は「Gozal」で簡単かつ高速
by
Motohiro Takatani
『できるWordPress』出版記念 - WordPressの第一人者が指南! 3時間でわかる Webサイト構築入門
by
Kunitoshi Hoshino
Webアクセシビリティポリシーのつくりかた・ひろめかた
by
Kobayashi Daisuke
Web制作 あとで揉めないための確認のポイント
by
高本 徹
ウェブ制作者のためのセルフブランディング
by
Hidekazu Ishikawa
サービス業から学んだコミュニケーションのコツ
by
Yumi Masaki
超初心者でもできた!AzureMobileService JSバージョン
by
Yuriko Kamimori
超初心者向け 無料ホームページ作成ツール Wixを学ぼう
by
Daisuke Ishii
Similar to 岡山をリーダブルな世界に
PDF
岡山で アクセシビリティ はじめよーでー
by
Nozomi Sawada
PDF
Webアクセシビリティ 今ならどうするの?
by
Nozomi Sawada
PPTX
Webアクセシビリティを考えてみる
by
yuosaka
PPTX
FinalObject_1_hello!_a11y_ver_phper
by
shiori koga
PDF
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
PDF
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
PDF
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
PDF
実はできている!? Webアクセシビリティ
by
力也 伊原
PDF
実はできているWebアクセシビリティ ヒカラボ編
by
Yoshinori OHTA
PDF
アクセシビリティはじめました
by
Yuichi Sugiyama
PDF
アクセシビリティキャンプ東京 #4 開催にあたり
by
Kazuhito Kidachi
PDF
デザイニングWebアクセシビリティ 誕生秘話
by
Yoshinori OHTA
PPTX
ウェブアクセシビリティ推進活動はじめました
by
LIFULL Co., Ltd.
PDF
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
by
力也 伊原
PPTX
Webアクセシビリティを支えるための技術
by
shiori koga
PDF
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
PDF
アクセシビリティとこれからのWebデザイン
by
力也 伊原
PDF
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
by
Web Accessibility Infrastructure Committee (WAIC)
PDF
遅くはない!今から始めるアクセシビリティ
by
milk54
PDF
html5jアクセシビリティ部第0回勉強会
by
takenspc
岡山で アクセシビリティ はじめよーでー
by
Nozomi Sawada
Webアクセシビリティ 今ならどうするの?
by
Nozomi Sawada
Webアクセシビリティを考えてみる
by
yuosaka
FinalObject_1_hello!_a11y_ver_phper
by
shiori koga
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
実はできている!? Webアクセシビリティ
by
力也 伊原
実はできているWebアクセシビリティ ヒカラボ編
by
Yoshinori OHTA
アクセシビリティはじめました
by
Yuichi Sugiyama
アクセシビリティキャンプ東京 #4 開催にあたり
by
Kazuhito Kidachi
デザイニングWebアクセシビリティ 誕生秘話
by
Yoshinori OHTA
ウェブアクセシビリティ推進活動はじめました
by
LIFULL Co., Ltd.
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
by
力也 伊原
Webアクセシビリティを支えるための技術
by
shiori koga
これでわかる!Webアクセシビリティって?JIS X 8341-3って?
by
Web Accessibility Infrastructure Committee (WAIC)
アクセシビリティとこれからのWebデザイン
by
力也 伊原
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
by
Web Accessibility Infrastructure Committee (WAIC)
遅くはない!今から始めるアクセシビリティ
by
milk54
html5jアクセシビリティ部第0回勉強会
by
takenspc
More from Nozomi Sawada
PDF
中小企業のWebサイトでも気にしておきたいアクセシビリティ
by
Nozomi Sawada
PDF
UDトークで会話をアクセシブルにしてみよう
by
Nozomi Sawada
PDF
色にまつわるエトセトラ(いろいろ)
by
Nozomi Sawada
PDF
コントラスト高めでいこう
by
Nozomi Sawada
PDF
代替テキストの基本から応用まで
by
Nozomi Sawada
PDF
こんなとき実感!代替テキストと字幕の大切さ
by
Nozomi Sawada
PDF
第7回 okayama-js 実践 WAI-ARIA
by
Nozomi Sawada
PDF
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
by
Nozomi Sawada
PDF
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
by
Nozomi Sawada
PDF
WAI-ARIAの考え方と使い方を整理しよう
by
Nozomi Sawada
PDF
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
by
Nozomi Sawada
PDF
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
by
Nozomi Sawada
PDF
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
by
Nozomi Sawada
PDF
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
by
Nozomi Sawada
PDF
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
by
Nozomi Sawada
PDF
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
by
Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ
by
Nozomi Sawada
UDトークで会話をアクセシブルにしてみよう
by
Nozomi Sawada
色にまつわるエトセトラ(いろいろ)
by
Nozomi Sawada
コントラスト高めでいこう
by
Nozomi Sawada
代替テキストの基本から応用まで
by
Nozomi Sawada
こんなとき実感!代替テキストと字幕の大切さ
by
Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIA
by
Nozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
by
Nozomi Sawada
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
by
Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しよう
by
Nozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
by
Nozomi Sawada
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
by
Nozomi Sawada
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
by
Nozomi Sawada
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
by
Nozomi Sawada
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
by
Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
by
Nozomi Sawada
岡山をリーダブルな世界に
2.
岡山をリーダブルな世界に リーダブルな夜 on 20180903
3.
自己紹介 3
4.
4 澤田 望 パーマ メガネ (老眼) ガリガリ 中年講師
5.
5 岡山で独立(2014) Webアクセシビリティ検証/ イラスト制作/ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン (~2013) サイトデザイン監修/ Webアクセシビリティ対応 WAIC
(2011~) (ウェブアクセシビリティ基盤委員会) コラムを担当
6.
本日の目標 6
7.
「リーダブル」とはどういうことなのか? オッサン達は岡山をどうしたいのか? 7
8.
Webアクセシビリティとは 8
9.
9 abilityaccess accessibility アクセスする 入手する たどり着く + = Webコンテンツに対するアクセスのしやすさ 能力 技量 度合い アクセスできる度合い たどり着けるかどうか
10.
10 ユーザビリティ 使い易いか/使い難いか の度合い 対象:利用できる人(使えることが前提) アクセシビリティ 使えるか/使えないか の度合い 対象:全ての人や機械(前提なし) U
X 的な指標
11.
11 建築物 サービス 交通機関 情報(Web) 耳マーク
12.
Webでは何を実現しているの? 12
13.
13 見えていない人
14.
聞こえていない人 14 テキスト 字幕
15.
15 Webから情報を得る バリエーションの一つに過ぎない をで操作し、 画面 音声 点字 見る 聞く 触る マウス タッチスクリーン キーボード スイッチ 音声 視線
16.
16 Tim Berners-Lee (Wikipediaより) The power
of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Webの力はその普遍性にある。 障害の有無に関わらず誰もがアクセスできることが本質的な姿なのだ。 ”
17.
Webに公開さえすれば伝わるの? 17
18.
「リーダブル」とは 18
19.
19 readable 〔手書きや印刷の文字が〕読める、判読できる 〔本や文章などが〕面白く読める、読みやすい、分かりやすい 〔プログラムのソースコードが〕読みやすい、理解しやすい 〔データなどが機械で〕読める、読み出せる 英辞郎 on the
WEB:アルク より ” ”
20.
20https://webtan.impress.co.jp/e/2012/05/17/12727 より プログラムにとって 読み易く理解し易い 人間にとって 読み易く理解し易い
21.
21 文書構造 <meta> このHTMLはどういうデータか? どう扱うべきか? 誰でも扱える 刺さるキャッチコピー いい感じの ビジュアルデザイン 読みやすい編集 レイアウト https://webtan.impress.co.jp/e/2012/05/17/12727 より
22.
22 マシンリーダビリティに偏った状態
23.
23 利用者は障害者だけではない マシンリーダブルにしただけでは 全ての障害者のWebアクセシビリティは向上しない 障害者 ≠ 全盲の視覚障害者
24.
24 ヒューマンリーダビリティに偏った状態
25.
25 利用者は健常者だけではない ヒューマンリーダブルにしただけでは 全ての健常者のWebアクセシビリティは向上しない
26.
26
27.
27
28.
28
29.
29
30.
30
31.
31
32.
岡山をどうしたいのか? 32
33.
33
34.
34 コストに見合わない。 アクセシビリティって、覚えても実際の案 件で求められないから、使ったことない。 自治体案件やらないから関係なくね?
35.
ホントにそうなのか? 35
36.
36
37.
37www.city.okayama.jp/okayama/okayama_t00070.html より
38.
一般企業は? 38
39.
39https://waic.jp/report/survey-corporations-201702/ より
40.
40https://waic.jp/report/survey-corporations-201702/ より
41.
41Google検索結果画面より
42.
岡山の企業は出てこない... 42
43.
じゃ、案件を作ろう! 43
44.
何をどうすれば案件になる? 44
45.
45 環境選定/構築 意思決定 予算編成 ビジュアルデザイン コピーライト 発注/決済者 サーバー技術者 ディレクター 原稿制作者 デザイナー (営業) PM チーム/WBS/要件定義 調査/分析/ルール策定 実装担当者 マークアップ
46.
46 環境選定/構築 : 情報
△ 意思決定 : 情報 ×? 予算編成 : 情報 ×? ビジュアルデザイン : 情報 ◯ コピーライト : 情報 △ 発注/決済者 サーバー技術者 ディレクター 原稿制作者 デザイナー (営業) PM チーム/WBS/要件定義 : 情報 ×? 調査/分析/ルール策定 : 情報 △ 実装担当者 マークアップ : 情報 ◯ あくまで個人の感想です
47.
47www.optic.or.jp/seo/ より
48.
努力が報われる世の中(大げさ)にしたい。 48
49.
そんな岡山にしたい。(照 49
50.
体験:リーダブルではない世界 50
51.
51 bit.ly/2yhFxvH Google Chromeに機能拡張プログラムを追加事前準備 bit.ly/2AN4Atm
52.
画像から情報が得られない 52
53.
53 1. 岡山県サイトにアクセス www.pref.okayama.jp/ 2. トップページを上から下まで、ざっと目を通す 3.
Web Developerで画像を非表示にする
54.
Q :「SEA TO
SUMMIT 2018」バナーはどこ? 54
55.
55岡山県ホームページ トップページ より
56.
Q : 「移住情報」ボタンはどこ? 56
57.
57岡山県ホームページ トップページ より
58.
58岡山県ホームページ トップページ より
59.
59岡山県ホームページ トップページ より
60.
1. Images タブ
> Disable Images チェックを外して再読み込み 2. Web Developer で代替テキストを表示 60
61.
画面が見えにくい 61
62.
62 【 弱視 】low
vision • 視機能が弱く、矯正もできない状態 • 「見えにくい」視覚障害のこと • 見えにくさは人それぞれで、症状はバラバラ • 白杖を使うので、全盲と間違われやすい
63.
じゃ、どうやってPCの画面を見てるの? 63
64.
64 伊敷さん(弱視)のPC利用シーン bit.ly/2phJek8
65.
マネしてやってみよう。 65
66.
• システム環境設定 >
アクセシビリティ > ズーム機能 「キーボードショートカットを使ってズーム」を✅ 拡大:option + command + ^ 縮小:option + command + - • ディスプレイ > カラーを反転 • 拡大鏡 拡大:Windowsキー + + 縮小:Windowsキー + - • コンピューターの簡単操作 > ハイコントラスト 66 Mac Windows
67.
67www.pref.okayama.jp/ より
68.
Q : 県庁の駐車料金はいくら? 68
69.
69www.pref.okayama.jp/page/409090.html より
70.
他にも色々な見え方があるね。 70
71.
• Blur:ぼやけ • Contrast
loss:光低感度 • Glare:光過敏 • Ghosting:ぶれ • Snow:ノイズ • Cloudiness:濁り/曇り • Flutter:眼振 • Color deficiency:色覚特性(P/D/T/A型) • Central:中心暗点(加齢黄斑変性) • Peripheral:視野狭窄(緑内障/網膜色素変性症) • Corner:網膜剥離 • Side:半盲 • Large spots:糖尿病性網膜症 • Floaters:飛蚊症 71 NoCoffee
72.
72 Protanopia P型(1型) 赤色が見えない 先天性色覚障害の約25% 色覚正常?者 Tritanopia T型(3型) 青色が見えにくい Deuteranopia D型(2型) 緑色が見えない 先天性色覚障害の約75%
73.
男性:23人に1人/女性:642人に1人 73バリアフリー:色覚障害者の移動等円滑化に関する調査研究 - 国土交通省
より
74.
74 1. 表示中の画面で「Protanopia」に設定 2. 色が変わったのを確認して 3.
下記ページにアクセス bit.ly/2PkF0C1
75.
Q : 野菜は何種類? 75
76.
76https://www.pakutaso.com/20180245032post-15041.html より
77.
77https://www.pakutaso.com/20180227032post-15035.html より
78.
78 1. 表示中の画面で「Tritanopia」に設定 2. 色が変わったのを確認して 3.
下記ページにアクセス bit.ly/2HWTK7Q
79.
Q : 益野西線は地図上のどれ? 79
80.
80https://bit.ly/2HWTK7Q より
81.
81Photoshop で色域指定で選んだところ
82.
フォーカスインジケータについて 82
83.
83https://waic.jp/docs/UNDERSTANDING-WCAG20/intro.html より
84.
84https://waic.jp/docs/WCAG20/Overview.html#operable より
85.
85https://waic.jp/docs/WCAG20/Overview.html#navigation-mechanisms より
86.
86 @SawadaStdDesign また来週!
Download