Html5 conference 2013

HTML5 Conference 2013

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

2013年11月30日

株式会社ミツエーリンクス
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

黒澤剛志

自己紹介：黒澤剛志
株式会社ミツエーリンクス
アクセシビリティエンジニア
W3C UAWG Member

• 顧客Webサイトの診断、コンサルティング
• 社内制作物のアクセシビリティチェック
• アクセシビリティBlogの執筆
(http://accessibility.mitsue.co.jp/)

1

マルチデバイス時代


Webは特定のデバイス・環境のものではない



多くの環境から利用できることが重要な時代に



= Webアクセシビリティ


2

HTML5 & WAI-ARIA




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


3

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


4

Webアクセシビリティ


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


5

多様なデバイス


タッチスクリーン



細かな操作が難しいデバイス



キーボードがないデバイス



音声入出力



電子ペーパー


6

一時的な状況


屋外で直射日光の下で使う場合（環境光）



音を出せない場合、音が聞こえない場合



マウスを使うことが難しい場合


7

支援技術


スクリーンリーダー



画面拡大、ズーム機能



ハイコントラストモード

など

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

8

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

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

9

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

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

10

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

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

11

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

セマンティクス



様々なデバイス・環境でのインタラクション



グラフィックスとマルチメディアの
代替コンテンツ


12

1. セマンティクス


13

The World Wide Web project

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


14



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

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

15

progress要素


16

progress要素


進捗率の表現

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


17

WAI-ARIA


18

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

HTMLだけではWebアプリケーションの
セマンティクスを十分表現できない

UIコンポーネント


動的なコンテンツ



フォーカス制御


19

WAI-ARIA

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

20

WAI-ARIA




WAI: Web Accessibility Initiative

W3C WAIが標準化
ARIA: Accessible Rich Internet Applications

Webアプリケーションをよりアクセシブルに


21

WAI-ARIAの特徴




属性でセマンティクスを表現

ホスト言語と組み合わせて利用
HTML5をホスト言語にする場合

HTML5にWAI-ARIAが取り込まれたため
そのまま利用可能


22

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>

23

UIコンポーネント：タブ


24

タブ


25

WAI-ARIAのタブモデル
タブ（tab）
タブリスト（tablist）

タブパネル（tabpanel）

26

タブリストとタブのマークアップ例
<ul role="tablist">
aria-selected="true"
</li>
aria-selected="false"
</li>
</ul>

27

タブパネルのマークアップ例
<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>


28

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


29

動的なコンテンツ


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


30

role="alert"


role="alert" ：アラート

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


31

WAI-ARIAの補足1


WAI-ARIA：セマンティクスを表現

コンテンツの見た目や動作は変わらない

見た目はCSSで設定

動作はJavaScriptなどで実装


32

WAI-ARIAの補足2


WAI-ARIAのセマンティクス

ブラウザーや支援技術などが
ユーザーに機能・情報を提供


33

2. インタラクション


34

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



様々な環境：
ユーザーが利用する入力デバイスは多様
1つのデバイスが複数の入力デバイスを持つこ
とも多い


35

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

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

http://nativeformelements.com/

36

スライダー


37

<input type="range">


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

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


38

HTML5のDOMイベント


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


39

クリック


40

clickイベント


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

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

41

要素を活性化する操作例



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


42

ユーザーの入力


43

inputイベント


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

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


44

inputイベントの互換性





IE8以下ではサポートされていない
IE9ではユーザーによる文字の削除では
inputイベントが発生しない
まだsetTimeoutを使って監視する必要がある
かも


45

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


46

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





あらゆる環境で利用できるわけではない
視覚（グラフィックス）

視覚障害、画像が読み込まれない状況
聴覚（マルチメディア）

聴覚障害、音を聞き取れない状況
代替コンテンツの提供


47

画像の代替テキスト


48

代替テキストの必要要件

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

49

canvas要素


50

canvas要素


フォールバックコンテンツ（代替コンテンツ）

画面上では非表示


キーボードフォーカスは移動
<canvas>
(フォールバックコンテンツ)
</canvas>


51

例： canvas要素


52

字幕とキャプション


53

字幕とキャプション



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


54

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>


55

WebVTT


WebVTT：キャプションフォーマット


実体はテキストファイル

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


56

WebVTTのスタイル


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


57

キャプションのサポート状況
ブラウザーの対応状況にまだ注意が必要




PCでのサポート状況

Google Chrome：対応





Safari：対応
Internet Explorer：Ver. 10から対応

スタイルの設定は不可
Mozilla Firefox：実装中


58

5. まとめ


59

まとめ


様々なデバイス・環境への対応




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


60

HTML5 & WAI-ARIAを使う場合




セマンティクス：

HTML5 & WAI-ARIA
インタラクションのサポート：

HTML5のネイティブウィジット




特定のデバイスに紐づかないイベントの活用


canvas要素のフォールバックコンテンツ、
track要素を使った字幕やキャプション


61

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

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


62

ご清聴ありがとうございました
kurosawa-takeshi@mitsue.co.jp

〒160-6133 東京都新宿区西新宿8-17-1
住友不動産新宿グランドタワー33階
会社案内：http://www.mitsue.co.jp/


63

Html5 conference 2013

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html5 conference 2013

Similar to Html5 conference 2013 (20)

Recently uploaded

Recently uploaded (9)

Html5 conference 2013