SlideShare a Scribd company logo
1 of 42
Download to read offline
岡山で アクセシビリティ はじめよーでー
2015年5月16日
オープンセミナー2015@岡山 懇親会 LT
2
SAWADA STANDARD DESIGN
澤田 望
@SawadaStdDesign
WAIC WG2委員(2011年〜)
キヤノンサイトのデザイン監修/運用(〜2013年)
2014年、岡山で独立
3
Webサイト作ったり、イラスト描いたり。
4
「セルフブランディング」的に、何が売りなのか?
5
Webアクセシビリティについての活動に
わりと長いこと関わっている。
6
Web ウェブ
Accessibility アクセシビリティ
Infrastructure 基盤
Committee 委員会
http://waic.jp/
7
世の中には、Webアクセシビリティについて
自分よりも技術に詳しい人は山のようにいる . . .
8
そこに突っ込んでいっても、差別化は見込めないぞ。
9
少し違う視点で、
やわらかくアピールしていった方がいいのかも . . .
10
今日は、岡山の皆さんにWebアクセシビリティを
身近に感じてもらうためのお話を。
11
「アクセシビリティ」って?
12
富士通のユニバーサルデザイン理念「ユーザビリティとアクセシビリティ」より
13
【 ユーザビリティ 】
利用できる人に対する
「使いやすいか/使いにくいか」いう度合い
※使えることが前提
14
「ユーザビリティが高い」
↓
15
「ユーザビリティが低い」
↓
16
【 アクセシビリティ 】
全ての人に対する
「使えるか/使えないのか」いう度合い
17
「アクセシビリティが高い」
↓
18
「アクセシビリティが低い」
↓
19
もう一度見てみると、
「身体の状態によっては」?
20
アクセシビリティっていうと、
「障碍者向け対応」的な部分が強調されやすい。
※もちろん大事な部分ではあります。
21
22
誤解を解いて、全ての人や機械が
となることを目指したい。
23
あえて「機械が」って入れてる?
24
だいたい未来って、機械がしゃべってますよね?
25
26
27
そこまでの未来じゃなくても . . .
28
この辺りならしゃべりますよね?
29
機械にしゃべってもらうには、
コンテンツの情報がちゃんと伝わる構造に
なっていなければいけません。
30
具体的な例を。
31
htmlを例に、NVDA(無料)という
スクリーンリーダーにしゃべらせてみます。
デモページ1
デモページ2
32
<img src="img/stamp-de-suki-jake.png" alt="">
↑
伝わらない
<img src="img/stamp-yacchi-mo-ne.png" alt="やっちもねー">
↑
伝わる
33
34
次にコンテンツの例を。
35
下の大きな丸いボタンを押してください。
実行
36
下? 大きな? 丸い?
37
下の大きな丸い「実行」ボタンを押してください。
実行
38
39
非常に初歩的な話ですけど、これだけでも岡山の
Webサイトのアクセシビリティは格段に向上します。
40
岡山で アクセシビリティ はじめよーでー!
岡山旅ねっとより(岡山市原尾島交差点)
41
気になったら、こちらもヨロシク。
42
ありがとうございました。

More Related Content

What's hot

ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
Yusuke Tamukai
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬん
Kenta Nakamura
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
 

What's hot (20)

あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティあなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
 
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬん
 
なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 

Similar to 岡山で アクセシビリティ はじめよーでー

ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
 
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
 

Similar to 岡山で アクセシビリティ はじめよーでー (20)

ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
 
Cssnite in sapporovol14
Cssnite in sapporovol14Cssnite in sapporovol14
Cssnite in sapporovol14
 
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
 
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
 
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
 
岡山をリーダブルな世界に
岡山をリーダブルな世界に岡山をリーダブルな世界に
岡山をリーダブルな世界に
 
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
 
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
 
ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
 
MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料
 
Making of FINN at Toyota and Yokohama ppt
Making of FINN at Toyota and Yokohama pptMaking of FINN at Toyota and Yokohama ppt
Making of FINN at Toyota and Yokohama ppt
 
WordPressの進化とWordPress名古屋コミュニティの進化
WordPressの進化とWordPress名古屋コミュニティの進化WordPressの進化とWordPress名古屋コミュニティの進化
WordPressの進化とWordPress名古屋コミュニティの進化
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
 
MTDDC Meetup HOKKAIDO 2013のご案内(仮)
MTDDC Meetup HOKKAIDO 2013のご案内(仮)MTDDC Meetup HOKKAIDO 2013のご案内(仮)
MTDDC Meetup HOKKAIDO 2013のご案内(仮)
 
WordBench京都9月号
WordBench京都9月号WordBench京都9月号
WordBench京都9月号
 
Viewを使って開発を楽にする話
Viewを使って開発を楽にする話Viewを使って開発を楽にする話
Viewを使って開発を楽にする話
 
Webデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組みWebデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組み
 
デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果
 
JBUG高知#0 Web制作現場でのバックログ活用事例
JBUG高知#0 Web制作現場でのバックログ活用事例JBUG高知#0 Web制作現場でのバックログ活用事例
JBUG高知#0 Web制作現場でのバックログ活用事例
 
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみるWeb屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
 

More from Nozomi Sawada

More from Nozomi Sawada (11)

中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
 
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみようUDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
 
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
 
コントラスト高めでいこう
コントラスト高めでいこうコントラスト高めでいこう
コントラスト高めでいこう
 
代替テキストの基本から応用まで
代替テキストの基本から応用まで代替テキストの基本から応用まで
代替テキストの基本から応用まで
 
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さこんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
 
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
 

岡山で アクセシビリティ はじめよーでー