1. HTML5とアクセシビリティ
2010.10.23 ウェブアクセシビリティ勉強会in神戸
HTML5-WEST.jp 村岡 正和

2. 自己紹介
むらおか まさかず
村岡正和 @bathtimefish
【仕事】
神戸でITシステム開発/コンサルティングをやってます。
【活動】
HTML5-WEST.jp Co-Founder, 京都GTUG, CSS Nite in OSAKA, OSC
Kansai実行委員, 中国ニュースブログ「Shanghai Watch」運営
【好きなもの】
HTML5, Python, JavaScript, 中国拳法

3. HTML5

4. HTML5とは？
• HTMLの次のバージョン
• 現在W3Cで標準化作業中
• 正式勧告は2022年？
• 正式勧告を待たず実装が進んでいる
• 今までに比べて大幅な改良が施されている

5. HTML5の強化点
• 要素の刷新
新規追加される要素、なくなる要素
section, header, nav, footer, article ... frameset, applet, dir, center ...
• 様々なAPIの追加
ビデオ、オーディオコントロール、2D&3Dグラフィック制御、
オフライン動作、バックグラウンド処理、双方向通信...
• ユニバーサル・アクセス
様々なデバイスで利用されることが考慮されている。
障がい者対応などWebアクセシビリティにも配慮されている。
できるだけ簡単な記述で強力な機能を使えるよう設計されている。

6. アクセシビリティ

7. アクセシビリティ
データ
• 利用のしやすさ
• あらゆる人にとって

8. アクセシビリティという観点から
現在までのHTML5の取り組みを眺めてみた

9. アクセシビリティという観点から
現在までのHTML5の取り組みを眺めてみた
仕様や実装の中で
興味深かった点をお話します。

10. Semantic Elemements

11. Semantic Web
• Webの利便性を向上させるための取り
組み。
• Webコンテンツにメタデータを付加す
ることでコンピュータが効率よくデー
タを処理できるようにする。

12. コンテンツ・モデル
http://www.html5.jp/tag/models/index.html

13. Example
• セクショニング・コンテンツ
article, aside, nav, section
• ヘッディング・コンテンツ
h1, h2, h3, h4, h5, h6, hgroup
• フレージング・コンテンツ
abbr, cite, code, small, ruby ...
• フロー・コンテンツ
header, footer ...

14. nav
article
nav
nav article
aside
aside
header
article

15. nav
article
nav
nav article
aside
aside
header
article

16. nav
article
nav
nav article
aside
aside
header
article

17. PC
音声リーダー
点字翻訳

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

22. machine-readable
• 機械がWebコンテンツの内容を理解する。
→ 機械がユーザーをサポートする範囲の拡大
→ サポート精度の向上
• WEBから直接目的に合ったデータを取得で
きる。
→ データ集積、解析の精度向上
→ 社会貢献度の高いサービスの迅速な提供

23. Opera10のナビゲーションバー

24. Opera10のナビゲーションバー

25. Opera10のナビゲーションバー

26. Web Application

27. 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/

28. Ericsson’s Demo
https://labs.ericsson.com/blog/beyond-html5-implementing-device-and-stream-management-webkit

29. Web
PC
Mobile

30. Consumer
electronic Sensor
Home
control
Web
Future Device
PC
Mobile

31. a Web Application
HTML5
All Web Devices

32. Web Applicationの可能性
• HTML5を解釈する様々なデバイスでアプリ
ケーションが動作する。
→ HTML5 is open standard.
→ 種類やメーカーが異なるデバイスでも同一の
サービスが利用可能。
→ 複数デバイスorサービスの対話によって高度な
アクセシビリティサポートが実現できるかも。

33. もっと勉強したらもっとでてきそう、

34. HTML5-WEST.jp
http://html5-west.jp/

37. KOF(11.5, 11.6) HTML5 大特集！！

38. HTML5を関西でもガンガン
盛り上げましょう！！

39. ご清聴ありがとうございました。