Html5 conference 2013

3,650 views

Published on

HTML5 Conference 2013でのセッション、「マルチデバイス時代のHTML5 & WAI-
ARIA」のスライドです。

2013年12月6日 スライド56のHTML例を修正しました。
具体的な内容:track要素のtitle属性をlabel属性としました。

Published in: Technology, Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,650
On SlideShare
0
From Embeds
0
Number of Embeds
1,591
Actions
Shares
0
Downloads
21
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Html5 conference 2013

  1. 1. HTML5 Conference 2013 マルチデバイス時代の HTML5&WAI-ARIA 2013年11月30日 株式会社ミツエーリンクス Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 黒澤 剛志
  2. 2. 自己紹介:黒澤 剛志 株式会社ミツエーリンクス アクセシビリティエンジニア W3C UAWG Member • 顧客Webサイトの診断、コンサルティング • 社内制作物のアクセシビリティチェック • アクセシビリティBlogの執筆 (http://accessibility.mitsue.co.jp/) Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 1
  3. 3. マルチデバイス時代  Webは特定のデバイス・環境のものではない  多くの環境から利用できることが重要な時代に  = Webアクセシビリティ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2
  4. 4. HTML5 & WAI-ARIA   HTML5: http://www.w3.org/TR/html5/ WAI-ARIA: http://www.w3.org/TR/wai-aria/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 3
  5. 5. Webアクセシビリティとは何か? Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 4
  6. 6. Webアクセシビリティ  特定の環境に依存せず 多くの環境からWebを利用できる Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 5
  7. 7. 多様なデバイス  タッチスクリーン  細かな操作が難しいデバイス  キーボードがないデバイス  音声入出力  電子ペーパー Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 6
  8. 8. 一時的な状況  屋外で直射日光の下で使う場合(環境光)  音を出せない場合、音が聞こえない場合  マウスを使うことが難しい場合 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 7
  9. 9. 支援技術  スクリーンリーダー  画面拡大、ズーム機能  ハイコントラストモード など iOS 7のアクセシビリティ設定画面 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 8
  10. 10. 最近のOSは支援技術を搭載 http://www.microsoft.com/ja-jp/enable/products/windows8/default.aspx Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 9
  11. 11. 最近のスマートデバイスは支援技術を搭載 http://www.apple.com/jp/accessibility/ios/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 10
  12. 12. 一般の人も支援技術を利用しつつある? http://news.mynavi.jp/articles/2013/10/25/ipadiphonehacks/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 11
  13. 13. Webアクセシビリティの3つのポイント  セマンティクス  様々なデバイス・環境でのインタラクション  グラフィックスとマルチメディアの 代替コンテンツ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 12
  14. 14. 1. セマンティクス Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 13
  15. 15. The World Wide Web project http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 14
  16. 16. セマンティクス  ブラウザーや支援技術がセマンティクスを理解  ユーザーの環境に合わせて情報・機能を提供 http://www.w3.org/TR/html5/dom.html#kinds-of-content Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 15
  17. 17. progress要素 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 16
  18. 18. progress要素  進捗率の表現 <progress max="100" value="43">43%</progress> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 17
  19. 19. WAI-ARIA Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 18
  20. 20. Webアプリケーションのセマンティクス  HTMLだけではWebアプリケーションの セマンティクスを十分表現できない  UIコンポーネント  動的なコンテンツ  フォーカス制御 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 19
  21. 21. WAI-ARIA http://www.w3.org/TR/wai-aria/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 20
  22. 22. WAI-ARIA   WAI: Web Accessibility Initiative  W3C WAIが標準化 ARIA: Accessible Rich Internet Applications  Webアプリケーションをよりアクセシブルに Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 21
  23. 23. WAI-ARIAの特徴   属性でセマンティクスを表現  ホスト言語と組み合わせて利用 HTML5をホスト言語にする場合  HTML5にWAI-ARIAが取り込まれたため そのまま利用可能 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 22
  24. 24. WAI-ARIAの基本  ロール(役割)  role=""   ステート(状態)  aria-*="" プロパティ  aria-*="" <ul role="tablist"> <li role="presentation"> <a href="#panel1" role="tab" aria-selected="true" aria-controls="panel1">Tab1</a> </li> </ul> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 23
  25. 25. UIコンポーネント:タブ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 24
  26. 26. タブ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 25
  27. 27. WAI-ARIAのタブモデル タブ(tab) タブリスト(tablist) タブパネル(tabpanel) Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 26
  28. 28. タブリストとタブのマークアップ例 <ul role="tablist"> <li role="presentation"> <a href="#panel1" role="tab" aria-selected="true" aria-controls="panel1">Tab1</a> </li> <li role="presentation"> <a href="#panel2" role="tab" aria-selected="false" aria-controls="panel2">Tab2</a> </li> </ul> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 27
  29. 29. タブパネルのマークアップ例 <div id="panel1" role="tabpanel" aria-hidden="false"> <h3>Tab Panel 1</h3> … </div> <div id="panel2" role="tabpanel" aria-hidden="true"> <h3>Tab Panel 2</h3> … </div> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 28
  30. 30. 動的なコンテンツ:アラート Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 29
  31. 31. 動的なコンテンツ  動的に追加される要素:重要性に差  重要な情報はユーザーにすぐ通知したい Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 30
  32. 32. role="alert"  role="alert" :アラート <div role="alert">ファイルサイズが…</div> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 31
  33. 33. WAI-ARIAの補足1  WAI-ARIA:セマンティクスを表現  コンテンツの見た目や動作は変わらない  見た目はCSSで設定  動作はJavaScriptなどで実装 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 32
  34. 34. WAI-ARIAの補足2  WAI-ARIAのセマンティクス  ブラウザーや支援技術などが ユーザーに機能・情報を提供 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 33
  35. 35. 2. インタラクション Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 34
  36. 36. 様々な環境でのインタラクション   様々な環境: ユーザーが利用する入力デバイスは多様 1つのデバイスが複数の入力デバイスを持つこ とも多い Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 35
  37. 37. HTML5のネイティブウィジット  ブラウザーが各デバイス・環境での インタラクションを実装 http://nativeformelements.com/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 36
  38. 38. スライダー Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 37
  39. 39. <input type="range">  ユーザーが操作に使うデバイスは様々  マウス、タッチスクリーン、キーボード… <input type="range" min="0" max="200" step="1"> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 38
  40. 40. HTML5のDOMイベント  特定のデバイスに紐づかないイベント: カスタムUIで様々なデバイスのサポート Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 39
  41. 41. クリック Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 40
  42. 42. clickイベント  マウスによる「クリック」以外に 要素が活性化した時に発生  a要素やbutton要素、input要素など http://www.w3.org/TR/html5/dom.html#interactive-content Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 41
  43. 43. 要素を活性化する操作例   マウス:クリック キーボード:フォーカスをあてた状態で Enterキーを押下 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 42
  44. 44. ユーザーの入力 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 43
  45. 45. inputイベント  ユーザーが入力に使うデバイスは様々  キーボード、マウス、音声入力… el.addEventListener('input', foo, false) Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 44
  46. 46. inputイベントの互換性    IE8以下ではサポートされていない IE9ではユーザーによる文字の削除では inputイベントが発生しない まだsetTimeoutを使って監視する必要がある かも Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 45
  47. 47. 3. グラフィックスとマルチメディア Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 46
  48. 48. グラフィックスとマルチメディア     あらゆる環境で利用できるわけではない 視覚(グラフィックス)  視覚障害、画像が読み込まれない状況 聴覚(マルチメディア)  聴覚障害、音を聞き取れない状況 代替コンテンツの提供 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 47
  49. 49. 画像の代替テキスト Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 48
  50. 50. 代替テキストの必要要件 http://www.w3.org/TR/html5/embedded-content-0.html#alt Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 49
  51. 51. canvas要素 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 50
  52. 52. canvas要素  フォールバックコンテンツ(代替コンテンツ)  画面上では非表示  キーボードフォーカスは移動 <canvas> (フォールバックコンテンツ) </canvas> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 51
  53. 53. 例: canvas要素 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 52
  54. 54. 字幕とキャプション Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 53
  55. 55. 字幕とキャプション   字幕 キャプション  字幕、効果音、場面説明 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 54
  56. 56. track要素  キャプションや字幕などを指定 <video src="video.mp4" controls> <track kind="captions" label="キャプション" src="captions.vtt" srclang="ja" default> <track kind="subtitles" label="字幕" src="subtitles.vtt" srclang="ja"> </video> Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 55
  57. 57. WebVTT  WebVTT:キャプションフォーマット  実体はテキストファイル WEBVTT 00:00:28.875 --> 00:00:30.250 危ない! 00:00:47.125 --> 00:00:48.250 ケガはないか? Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 56
  58. 58. WebVTTのスタイル  様々なスタイルの適用が可能 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 57
  59. 59. キャプションのサポート状況 ブラウザーの対応状況にまだ注意が必要   PCでのサポート状況  Google Chrome:対応    Safari:対応 Internet Explorer:Ver. 10から対応  スタイルの設定は不可 Mozilla Firefox:実装中 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 58
  60. 60. 5. まとめ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 59
  61. 61. まとめ  様々なデバイス・環境への対応  セマンティクス   様々なデバイス・環境でのインタラクション グラフィックスとマルチメディアの 代替コンテンツ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 60
  62. 62. HTML5 & WAI-ARIAを使う場合   セマンティクス:  HTML5 & WAI-ARIA インタラクションのサポート:  HTML5のネイティブウィジット   特定のデバイスに紐づかないイベントの活用 代替コンテンツ  canvas要素のフォールバックコンテンツ、 track要素を使った字幕やキャプション Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 61
  63. 63. マルチデバイス時代のHTML5&WAI-ARIA HTML5とWAI-ARIAを活かして マルチデバイスに対応した アクセシブルなサイトを Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 62
  64. 64. ご清聴ありがとうございました kurosawa-takeshi@mitsue.co.jp 〒160-6133 東京都新宿区西新宿8-17-1 住友不動産新宿グランドタワー33階 会社案内:http://www.mitsue.co.jp/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 63

×