Your SlideShare is downloading. ×
0
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Html5 conference 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 conference 2013

2,889

Published on

HTML5 Conference 2013でのセッション、「マルチデバイス時代のHTML5 & WAI- …

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
2,889
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
15
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×