![WAI-ARIAのメリット
●
各属性がとりうる値は決まっている
●
属性と属性値を見て決め打ち処理が可能
– role=”tab”は常にタブ
●
タブを取得するには
– querySelector('[role=”tab”]')
2012年12月1日 ARIAとGaia 13](https://image.slidesharecdn.com/aria-gaia-130222081857-phpapp01/85/ARIA-Gaia-13-320.jpg)
ARIAとGaia
- 1. ARIAとGaia Mozilla 勉強会＠東京 8th 2012年12月1日 taken (@Takenspc)
- 2. 内容 ● HTML5は一般的なUI部品を 網羅しているわけではない ● WAI-ARIAでHTMLなどに UI部品としてのセマンティクスを 与えることができる ● GaiaもWAI-ARIAを使っている 2012年12月1日 ARIAとGaia 2
- 3. いわゆるHTML5 ● HTML5でアプリケーションを書く場合 ● UI部品として一般的でも HTML5に対応する要素がないものがある 2012年12月1日 ARIAとGaia 3
- 4. ステータス通知 ステータス通知 2012年12月1日 ARIAとGaia 4
- 5. タブ タブ 2012年12月1日 ARIAとGaia 5
- 6. XULではこう書けた ● タブ <tabbox> <tabs> <tab label="Tab1"/> <tab label="Tab2"/> </tabs> <tabpanels> <tabpanel><!-- ... --></tabpanel> <tabpanel><!-- ... --></tabpanel> </tabpanels> </tabbox> 2012年12月1日 ARIAとGaia 6
- 7. 今回はHTMLの話なので… ● tab要素などは使えない 2012年12月1日 ARIAとGaia 7
- 8. クラス使えばいいという話も ● タブ <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> 2012年12月1日 ARIAとGaia 8
- 9. でも人によってはこう書くかも… ● タブ <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> 2012年12月1日 ARIAとGaia 9
- 10. クラスのメリット・デメリット ● クラスは作者が自由に決められる ● 決め打ち処理ができない – タブがtabと書かれるかtabheaderと書かれるか – tabはタブなのか表なのかタブストップなのか ● タブを取得するには – querySelector('.tab')? – querySelector('.tabheader')? 2012年12月1日 ARIAとGaia 10
- 11. 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> 2012年12月1日 ARIAとGaia 11
- 12. WAI-ARIA ● UI部品の種類や状態、プロパティを表す語彙 – 要素の名前(div, article, section…)ではなく 属性(role, aria-*)を使って表現 – UI部品の種類はrole属性で表現 ● W3C仕様 (WAI-ARIA 1.0) – セマンティクスが定義された語彙 – 仕様に含まれないUI部品も 2012年12月1日 ARIAとGaia 12
- 13. WAI-ARIAのメリット ● 各属性がとりうる値は決まっている ● 属性と属性値を見て決め打ち処理が可能 – role=”tab”は常にタブ ● タブを取得するには – querySelector('[role=”tab”]') 2012年12月1日 ARIAとGaia 13
- 14. WAI-ARIAの注意点 #1 ● WAI-ARIAはUI部品の種類を指定する以外にも 役割がある ● 適切に実装することが重要 – WAI-ARIA 1.0 Authoring Practices – Using ARIA in HTML5 – 3.2.7 WAI-ARIA — HTML5 2012年12月1日 ARIAとGaia 14
- 15. WAI-ARIAの注意点 #2 ● WAI-ARIAの属性を追加しても… – 動作は変わらない – 見た目も変わらない ● 動作や見た目は… – 自分で実装する – ライブラリを使う 2012年12月1日 ARIAとGaia 15
- 16. Gaia ● Firefox OSのUI ● HTML5/CSS/JavaScript 2012年12月1日 ARIAとGaia 16
- 17. GaiaのUI部品 ● UI部品の種類 – HTMLの要素 & WAI-ARIA (role属性) ● より細かな種類、付加的な情報 – data-*属性 & WAI-ARIA (aria-*属性) ● ビジュアルのバリエーション？ – class属性 2012年12月1日 ARIAとGaia 17
- 18. Gaiaのステータス通知 <section role="status"> <p>...</p> </section> https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status/index.html 2012年12月1日 ARIAとGaia 18
- 19. 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 2012年12月1日 ARIAとGaia 19
- 20. まとめ ● HTML5は一般的なUI部品を 網羅しているわけではない ● WAI-ARIAでHTMLなどに UI部品としてのセマンティクスを 与えることができる ● GaiaもWAI-ARIAを使っている 2012年12月1日 ARIAとGaia 20
- 21. ご静聴ありがとうございました 2012年12月1日 ARIAとGaia 21