html5 conference 2013

株式会社ミツエーリンクス

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

マルチデバイス時代の HTML5&WAI-ARIA

HTML5 Conference 2013

2013年11月30日

黒澤剛志

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 1

自己紹介：黒澤剛志

株式会社ミツエーリンクスアクセシビリティエンジニア W3C UAWG Member

• 顧客Webサイトの診断、コンサルティング • 社内制作物のアクセシビリティチェック • アクセシビリティBlogの執筆

(http://accessibility.mitsue.co.jp/)


マルチデバイス時代

Webは特定のデバイス・環境のものではない多くの環境から利用できることが重要な時代に = Webアクセシビリティ


HTML5 & WAI-ARIA

HTML5： http://www.w3.org/TR/html5/

WAI-ARIA： http://www.w3.org/TR/wai-aria/


Webアクセシビリティとは何か？


Webアクセシビリティ

特定の環境に依存せず多くの環境からWebを利用できる


多様なデバイス

タッチスクリーン細かな操作が難しいデバイスキーボードがないデバイス音声入出力電子ペーパー


一時的な状況

屋外で直射日光の下で使う場合（環境光）音を出せない場合、音が聞こえない場合マウスを使うことが難しい場合


支援技術

スクリーンリーダー画面拡大、ズーム機能ハイコントラストモードなど

iOS 7のアクセシビリティ設定画面


最近のOSは支援技術を搭載

http://www.microsoft.com/ja-jp/enable/products/windows8/default.aspx


最近のスマートデバイスは支援技術を搭載

http://www.apple.com/jp/accessibility/ios/


一般の人も支援技術を利用しつつある？

http://news.mynavi.jp/articles/2013/10/25/ipadiphonehacks/


Webアクセシビリティの3つのポイント

セマンティクス様々なデバイス・環境でのインタラクショングラフィックスとマルチメディアの

代替コンテンツ


セマンティクス 1.


The World Wide Web project

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html






セマンティクス

ブラウザーや支援技術がセマンティクスを理解ユーザーの環境に合わせて情報・機能を提供

http://www.w3.org/TR/html5/dom.html#kinds-of-content


progress要素


progress要素

進捗率の表現

<progress max="100" value="43">43%</progress>


WAI-ARIA


Webアプリケーションのセマンティクス

HTMLだけではWebアプリケーションのセマンティクスを十分表現できない UIコンポーネント動的なコンテンツフォーカス制御


WAI-ARIA

http://www.w3.org/TR/wai-aria/


WAI-ARIA

WAI: Web Accessibility Initiative W3C WAIが標準化

ARIA: Accessible Rich Internet Applications Webアプリケーションをよりアクセシブルに


WAI-ARIAの特徴

属性でセマンティクスを表現ホスト言語と組み合わせて利用

HTML5をホスト言語にする場合 HTML5にWAI-ARIAが取り込まれたため

そのまま利用可能


WAI-ARIAの基本

ロール（役割） role=""

<ul role="tablist"> <li role="presentation"> <a href="#panel1" role="tab" aria-selected="true" aria-controls="panel1">Tab1</a> </li> </ul>

ステート（状態） aria-*=""

プロパティ aria-*=""


UIコンポーネント：タブ


タブ


WAI-ARIAのタブモデル

タブリスト（tablist）

タブ（tab）

タブパネル（tabpanel）


タブリストとタブのマークアップ例

<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>


タブパネルのマークアップ例

<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>


動的なコンテンツ：アラート


動的なコンテンツ

動的に追加される要素：重要性に差重要な情報はユーザーにすぐ通知したい


role="alert"

role="alert" ：アラート

<div role="alert">ファイルサイズが…</div>


WAI-ARIAの補足1

WAI-ARIA：セマンティクスを表現コンテンツの見た目や動作は変わらない

見た目はCSSで設定動作はJavaScriptなどで実装


WAI-ARIAの補足2

WAI-ARIAのセマンティクスブラウザーや支援技術などが

ユーザーに機能・情報を提供


インタラクション 2.


様々な環境でのインタラクション

様々な環境：ユーザーが利用する入力デバイスは多様

1つのデバイスが複数の入力デバイスを持つことも多い


HTML5のネイティブウィジット

ブラウザーが各デバイス・環境でのインタラクションを実装

http://nativeformelements.com/


スライダー


<input type="range">

ユーザーが操作に使うデバイスは様々マウス、タッチスクリーン、キーボード…

<input type="range" min="0" max="200" step="1">


HTML5のDOMイベント

特定のデバイスに紐づかないイベント：カスタムUIで様々なデバイスのサポート


クリック


clickイベント

マウスによる「クリック」以外に要素が活性化した時に発生 a要素やbutton要素、input要素など

http://www.w3.org/TR/html5/dom.html#interactive-content


要素を活性化する操作例

マウス：クリックキーボード：フォーカスをあてた状態で

Enterキーを押下


ユーザーの入力


inputイベント

ユーザーが入力に使うデバイスは様々キーボード、マウス、音声入力…

el.addEventListener('input', foo, false)


inputイベントの互換性

IE8以下ではサポートされていない IE9ではユーザーによる文字の削除では

inputイベントが発生しない

まだsetTimeoutを使って監視する必要があるかも


グラフィックスとマルチメディア 3.


グラフィックスとマルチメディア

あらゆる環境で利用できるわけではない視覚（グラフィックス）視覚障害、画像が読み込まれない状況

聴覚（マルチメディア）聴覚障害、音を聞き取れない状況

代替コンテンツの提供


画像の代替テキスト


代替テキストの必要要件

http://www.w3.org/TR/html5/embedded-content-0.html#alt


canvas要素


canvas要素

フォールバックコンテンツ（代替コンテンツ）画面上では非表示キーボードフォーカスは移動

<canvas> (フォールバックコンテンツ) </canvas>


例： canvas要素


字幕とキャプション


字幕とキャプション

字幕キャプション字幕、効果音、場面説明


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>


WebVTT

WebVTT：キャプションフォーマット実体はテキストファイル

WEBVTT 00:00:28.875 --> 00:00:30.250 危ない！ 00:00:47.125 --> 00:00:48.250 ケガはないか？


WebVTTのスタイル

様々なスタイルの適用が可能


キャプションのサポート状況

ブラウザーの対応状況にまだ注意が必要 PCでのサポート状況 Google Chrome：対応 Safari：対応 Internet Explorer：Ver. 10から対応

スタイルの設定は不可 Mozilla Firefox：実装中


まとめ 5.


まとめ

様々なデバイス・環境への対応セマンティクス様々なデバイス・環境でのインタラクショングラフィックスとマルチメディアの

代替コンテンツ


HTML5 & WAI-ARIAを使う場合

セマンティクス： HTML5 & WAI-ARIA

インタラクションのサポート： HTML5のネイティブウィジット特定のデバイスに紐づかないイベントの活用

代替コンテンツ canvas要素のフォールバックコンテンツ、

track要素を使った字幕やキャプション


マルチデバイス時代のHTML5&WAI-ARIA

HTML5とWAI-ARIAを活かしてマルチデバイスに対応したアクセシブルなサイトを

html5 conference 2013

Technology