Html5とアクセシビリティ
Upcoming SlideShare
Loading in...5
×
 

Html5とアクセシビリティ

on

  • 1,506 views

 

Statistics

Views

Total Views
1,506
Views on SlideShare
1,506
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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とアクセシビリティ Html5とアクセシビリティ Presentation Transcript

  • HTML5とアクセシビリティ2010.10.23 ウェブアクセシビリティ勉強会in神戸 HTML5-WEST.jp 村岡 正和
  • 自己紹介 むらおか まさかず村岡正和 @bathtimefish【仕事】神戸でITシステム開発/コンサルティングをやってます。【活動】HTML5-WEST.jp Co-Founder, 京都GTUG, CSS Nite in OSAKA, OSCKansai実行委員, 中国ニュースブログ「Shanghai Watch」運営【好きなもの】HTML5, Python, JavaScript, 中国拳法
  • HTML5
  • HTML5とは?• HTMLの次のバージョン• 現在W3Cで標準化作業中• 正式勧告は2022年?• 正式勧告を待たず実装が進んでいる• 今までに比べて大幅な改良が施されている
  • HTML5の強化点• 要素の刷新 新規追加される要素、なくなる要素 section, header, nav, footer, article ... frameset, applet, dir, center ...• 様々なAPIの追加 ビデオ、オーディオコントロール、2D&3Dグラフィック制御、 オフライン動作、バックグラウンド処理、双方向通信...• ユニバーサル・アクセス 様々なデバイスで利用されることが考慮されている。 障がい者対応などWebアクセシビリティにも配慮されている。 できるだけ簡単な記述で強力な機能を使えるよう設計されている。
  • アクセシビリティ
  • アクセシビリティデータ • 利用のしやすさ • あらゆる人にとって
  • アクセシビリティという観点から現在までの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, code, small, ruby ...• フロー・コンテンツ header, footer ...
  • 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> <p><span itemprop=”adr” itemscope><span itemprop="region">兵庫県</span><span itemprop=”locality”>長田区</span></span>に住んでいます。</p></div> http://www.w3.org/TR/html5/microdata.html
  • 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 autoplay></video><script> function update(stream) { document.getElementsByTagName(video)[0].src = stream.url; }</script> http://dev.w3.org/html5/html-device/
  • Ericsson’s Demohttps://labs.ericsson.com/blog/beyond-html5-implementing-device-and-stream-management-webkit
  • WebPC Mobile
  • Consumer electronic SensorHomecontrol Web Future Device PC Mobile
  • a Web Application HTML5All Web Devices
  • Web Applicationの可能性• HTML5を解釈する様々なデバイスでアプリ ケーションが動作する。 → HTML5 is open standard. → 種類やメーカーが異なるデバイスでも同一の サービスが利用可能。 → 複数デバイスorサービスの対話によって高度な アクセシビリティサポートが実現できるかも。
  • もっと勉強したらもっとでてきそう、
  • HTML5-WEST.jp http://html5-west.jp/
  • KOF(11.5, 11.6) HTML5 大特集!!
  • HTML5を関西でもガンガン 盛り上げましょう!!
  • ご清聴ありがとうございました。