Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ARIAとGaia

960 views

Published on

Published in: Technology
  • Be the first to comment

ARIAとGaia

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

×