HTML5とアクセシビリティ2010.10.23 ウェブアクセシビリティ勉強会in神戸      HTML5-WEST.jp 村岡 正和
自己紹介 むらおか まさかず村岡正和                   @bathtimefish【仕事】神戸でITシステム開発/コンサルティングをやってます。【活動】HTML5-WEST.jp Co-Founder, 京都GTUG, CSS ...
HTML5
HTML5とは?•   HTMLの次のバージョン•   現在W3Cで標準化作業中•   正式勧告は2022年?•   正式勧告を待たず実装が進んでいる•   今までに比べて大幅な改良が施されている
HTML5の強化点•   要素の刷新    新規追加される要素、なくなる要素    section, header, nav, footer, article ...   frameset, applet, dir, center ...•  ...
アクセシビリティ
アクセシビリティデータ      • 利用のしやすさ      • あらゆる人にとって
アクセシビリティという観点から現在までのHTML5の取り組みを眺めてみた
アクセシビリティという観点から現在までのHTML5の取り組みを眺めてみた    仕様や実装の中で興味深かった点をお話します。
Semantic	 Elemements
Semantic Web• Webの利便性を向上させるための取り 組み。• Webコンテンツにメタデータを付加す ることでコンピュータが効率よくデー タを処理できるようにする。
コンテンツ・モデルhttp://www.html5.jp/tag/models/index.html
Example• セクショニング・コンテンツ article, aside, nav, section• ヘッディング・コンテンツ h1, h2, h3, h4, h5, h6, hgroup• フレージング・コンテンツ abbr, cite,...
nav      articlenav                nav     article       aside                      aside      header      article
nav      articlenav                nav     article       aside                      aside      header      article
nav      articlenav                nav     article       aside                      aside      header      article
PC     音声リーダー          点字翻訳
Microdata<div itemscope itemtype=”http://microformats.org/profile/hcard”> <p>私の名前は <span itemprop="fn">村岡正和</span>です。</p> ...
machine-readable• 機械がWebコンテンツの内容を理解する。 → 機械がユーザーをサポートする範囲の拡大 → サポート精度の向上• WEBから直接目的に合ったデータを取得で きる。 → データ集積、解析の精度向上 → 社会貢献度...
Opera10のナビゲーションバー
Opera10のナビゲーションバー
Opera10のナビゲーションバー
Web	 Application
HTML Device<p>To start chatting, select a video camera: <device type=media onchange="update(this.data)"></p><video autopla...
Ericsson’s Demohttps://labs.ericsson.com/blog/beyond-html5-implementing-device-and-stream-management-webkit
WebPC     Mobile
Consumer    electronic            SensorHomecontrol            Web                          Future Device     PC          ...
a Web Application     HTML5All Web Devices
Web Applicationの可能性• HTML5を解釈する様々なデバイスでアプリ ケーションが動作する。 → HTML5 is open standard. → 種類やメーカーが異なるデバイスでも同一の サービスが利用可能。 → 複数デバイ...
もっと勉強したらもっとでてきそう、
HTML5-WEST.jp  http://html5-west.jp/
KOF(11.5, 11.6) HTML5 大特集!!
HTML5を関西でもガンガン 盛り上げましょう!!
ご清聴ありがとうございました。
Html5とアクセシビリティ
Html5とアクセシビリティ
Html5とアクセシビリティ
Html5とアクセシビリティ
Html5とアクセシビリティ
Upcoming SlideShare
Loading in …5
×

Html5とアクセシビリティ

1,292 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,292
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Html5とアクセシビリティ

    1. 1. HTML5とアクセシビリティ2010.10.23 ウェブアクセシビリティ勉強会in神戸 HTML5-WEST.jp 村岡 正和
    2. 2. 自己紹介 むらおか まさかず村岡正和 @bathtimefish【仕事】神戸でITシステム開発/コンサルティングをやってます。【活動】HTML5-WEST.jp Co-Founder, 京都GTUG, CSS Nite in OSAKA, OSCKansai実行委員, 中国ニュースブログ「Shanghai Watch」運営【好きなもの】HTML5, Python, JavaScript, 中国拳法
    3. 3. HTML5
    4. 4. HTML5とは?• HTMLの次のバージョン• 現在W3Cで標準化作業中• 正式勧告は2022年?• 正式勧告を待たず実装が進んでいる• 今までに比べて大幅な改良が施されている
    5. 5. HTML5の強化点• 要素の刷新 新規追加される要素、なくなる要素 section, header, nav, footer, article ... frameset, applet, dir, center ...• 様々なAPIの追加 ビデオ、オーディオコントロール、2D&3Dグラフィック制御、 オフライン動作、バックグラウンド処理、双方向通信...• ユニバーサル・アクセス 様々なデバイスで利用されることが考慮されている。 障がい者対応などWebアクセシビリティにも配慮されている。 できるだけ簡単な記述で強力な機能を使えるよう設計されている。
    6. 6. アクセシビリティ
    7. 7. アクセシビリティデータ • 利用のしやすさ • あらゆる人にとって
    8. 8. アクセシビリティという観点から現在までのHTML5の取り組みを眺めてみた
    9. 9. アクセシビリティという観点から現在までのHTML5の取り組みを眺めてみた 仕様や実装の中で興味深かった点をお話します。
    10. 10. Semantic Elemements
    11. 11. Semantic Web• Webの利便性を向上させるための取り 組み。• Webコンテンツにメタデータを付加す ることでコンピュータが効率よくデー タを処理できるようにする。
    12. 12. コンテンツ・モデルhttp://www.html5.jp/tag/models/index.html
    13. 13. Example• セクショニング・コンテンツ article, aside, nav, section• ヘッディング・コンテンツ h1, h2, h3, h4, h5, h6, hgroup• フレージング・コンテンツ abbr, cite, code, small, ruby ...• フロー・コンテンツ header, footer ...
    14. 14. nav articlenav nav article aside aside header article
    15. 15. nav articlenav nav article aside aside header article
    16. 16. nav articlenav nav article aside aside header article
    17. 17. PC 音声リーダー 点字翻訳
    18. 18. Microdata<div itemscope itemtype=”http://microformats.org/profile/hcard”> <p>私の名前は <span itemprop="fn">村岡正和</span>です。</p> <p><span itemprop=”adr” itemscope><span itemprop="region">兵庫県</span><span itemprop=”locality”>長田区</span></span>に住んでいます。</p></div> http://www.w3.org/TR/html5/microdata.html
    19. 19. machine-readable• 機械がWebコンテンツの内容を理解する。 → 機械がユーザーをサポートする範囲の拡大 → サポート精度の向上• WEBから直接目的に合ったデータを取得で きる。 → データ集積、解析の精度向上 → 社会貢献度の高いサービスの迅速な提供
    20. 20. Opera10のナビゲーションバー
    21. 21. Opera10のナビゲーションバー
    22. 22. Opera10のナビゲーションバー
    23. 23. Web Application
    24. 24. HTML Device<p>To start chatting, select a video camera: <device type=media onchange="update(this.data)"></p><video autoplay></video><script> function update(stream) { document.getElementsByTagName(video)[0].src = stream.url; }</script> http://dev.w3.org/html5/html-device/
    25. 25. Ericsson’s Demohttps://labs.ericsson.com/blog/beyond-html5-implementing-device-and-stream-management-webkit
    26. 26. WebPC Mobile
    27. 27. Consumer electronic SensorHomecontrol Web Future Device PC Mobile
    28. 28. a Web Application HTML5All Web Devices
    29. 29. Web Applicationの可能性• HTML5を解釈する様々なデバイスでアプリ ケーションが動作する。 → HTML5 is open standard. → 種類やメーカーが異なるデバイスでも同一の サービスが利用可能。 → 複数デバイスorサービスの対話によって高度な アクセシビリティサポートが実現できるかも。
    30. 30. もっと勉強したらもっとでてきそう、
    31. 31. HTML5-WEST.jp http://html5-west.jp/
    32. 32. KOF(11.5, 11.6) HTML5 大特集!!
    33. 33. HTML5を関西でもガンガン 盛り上げましょう!!
    34. 34. ご清聴ありがとうございました。

    ×