ARIAとGaia

ARIAとGaia

Mozilla 勉強会＠東京 8th
2012年12月1日 taken (@Takenspc)

内容

●
HTML5は一般的なUI部品を
網羅しているわけではない
●
WAI-ARIAでHTMLなどに
UI部品としてのセマンティクスを
与えることができる
●
GaiaもWAI-ARIAを使っている

2012年12月1日 ARIAとGaia 2

いわゆるHTML5

●
HTML5でアプリケーションを書く場合
●
UI部品として一般的でも
HTML5に対応する要素がないものがある


ステータス通知

ステータス通知


タブ

タブ


XULではこう書けた

●
タブ

<tabbox>
<tabs>
<tab label="Tab1"/>
<tab label="Tab2"/>
</tabs>
<tabpanels>
<tabpanel></tabpanel>
<tabpanel></tabpanel>
</tabpanels>
</tabbox>

今回はHTMLの話なので…

●
tab要素などは使えない


クラス使えばいいという話も

●
タブ

<div class="tabbox">
<ul class="tabs">
<li class="tab">Tab1</li>
<li class="tab">Tab2</li>
</ul>
<div class="tabpanels">
<div class="tabpanel"></div>
<div class="tabpanel"></div>
</div>
</div>

でも人によってはこう書くかも…

●
タブ

<div class="tab">
<ul class="tabheaders">
<li class="tabheader">Tabu1</li>
<li class="tabheader">Tabu2</li>
</ul>
<div class="tabcontent-container">
<div class="tabcontent"></div>
<div class="tabcontent"></div>
</div>
</div>

クラスのメリット・デメリット

●
クラスは作者が自由に決められる
●
決め打ち処理ができない
– タブがtabと書かれるかtabheaderと書かれるか
– tabはタブなのか表なのかタブストップなのか
●
タブを取得するには
– querySelector('.tab')?
– querySelector('.tabheader')?

WAI-ARIAを使う場合

●
タブ

<div>
<ul role="tablist">
<li role="tab" id="tab1">Tab1</li>
<li role="tab" id="tab2">Tab2</li>
</ul>
<div>
<div role="tabpanel" aria-labeledby="tab1"></div>
<div role="tabpanel" aria-labeledby="tab2"
aria-hidden="true"></div>
</div>
</div>

WAI-ARIA

●
UI部品の種類や状態、プロパティを表す語彙
– 要素の名前(div, article, section…)ではなく
属性(role, aria-*)を使って表現
– UI部品の種類はrole属性で表現
●
W3C仕様 (WAI-ARIA 1.0)
– セマンティクスが定義された語彙
– 仕様に含まれないUI部品も


WAI-ARIAのメリット

●
各属性がとりうる値は決まっている
●
属性と属性値を見て決め打ち処理が可能
– role=”tab”は常にタブ
●
タブを取得するには
– querySelector('[role=”tab”]')


WAI-ARIAの注意点 #1

●
WAI-ARIAはUI部品の種類を指定する以外にも
役割がある
●
適切に実装することが重要
– WAI-ARIA 1.0 Authoring Practices
– Using ARIA in HTML5
– 3.2.7 WAI-ARIA — HTML5


WAI-ARIAの注意点 #2

●
WAI-ARIAの属性を追加しても…
– 動作は変わらない
– 見た目も変わらない
●
動作や見た目は…
– 自分で実装する
– ライブラリを使う


Gaia

●
Firefox OSのUI
●
HTML5/CSS/JavaScript


GaiaのUI部品

●
UI部品の種類
– HTMLの要素 & WAI-ARIA (role属性)
●
より細かな種類、付加的な情報
– data-*属性 & WAI-ARIA (aria-*属性)
●
ビジュアルのバリエーション？
– class属性


Gaiaのステータス通知

<section role="status">
<p>...</p>
</section>

https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status/index.html

Gaiaのタブ

<section role="region">
<ul role="tablist" data-items="4"
class="bottom">
<li id="panel1" role="tab">
<a href="#panel1"
class="icon">comms</a>
<div role="tabpanel"></div>
</li>
</ul>
</section>

https://github.com/mozilla-b2g/gaia/blob/master/shared/style_unstable/tabs/index.html

まとめ

●
HTML5は一般的なUI部品を
網羅しているわけではない
●
WAI-ARIAでHTMLなどに
UI部品としてのセマンティクスを
与えることができる
●
GaiaもWAI-ARIAを使っている


ご静聴ありがとうございました


ARIAとGaia

Recommended

Recommended

More Related Content

Featured

Featured (20)

ARIAとGaia