Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
岡山で アクセシビリティ はじめよーでー
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
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

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

1,785 views

Published on

オープンセミナー2015@岡山 懇親会LTで使用したスライドです。

Published in: Internet
  • Be the first to comment

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

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

×