Web Componentsのアクセシビリティ

Transcript

• 1. Web Componentsのア クセシビリティ 2015年1月25日 株式会社ミツエーリンクス 黒澤剛志
• 2. 自己紹介：黒澤 剛志 顧客Webサイトの診断、コンサルティング 社内制作物のアクセシビリティチェック アクセシビリティBlogの執筆 (http://www.mitsue.co.jp/knowledge/blog/a11y/) 2 黒澤 剛志 株式会社ミツエーリンクス アクセシビリティエンジニア
• 3. 3 http://www.csun.edu/cod/conference/2015/sessions/index.php/public/presentations/view/161
• 4. Webアクセシビリティ 4
• 5. Webアクセシビリティとは 特定の環境に依存せず多くの環境からWebを 利用できる 5
• 6. 多様なデバイス タッチスクリーン キーボードがないデバイス キーボードしかないデバイス 音声入出力 電子ペーパー 6
• 7. 一時的な制約 屋外で直射日光の下で使う場合（環境光） 音を出せない場合、音が聞こえない場合 けがや状況による制約 7
• 8. 支援技術 スクリーンリーダー 画面拡大、ズーム機能 ハイコントラストモード 8
• 9. Webアクセシビリティの3つのポイ ント セマンティクス 様々なデバイス・環境でのインタラクション 代替コンテンツ 9
• 10. セマンティクス マシン（ブラウザーや支援技術）がセマン ティクスを理解 ユーザーの環境に合わせて情報・機能を提供 10 コンテン ツ ブラウザー ユーザー ブラウザー 支援技術
• 11. Web Components 11
• 12. Web Componentsとは ページの構成要素をコンポーネントに コンポーネントを組み合わせてページを構成 コンポーネント単位でカプセル化 12
• 13. 13 https://www.polymer-project.org/docs/elements/paper-elements.html
• 14. 14 http://gaia-components.github.io/gaia-components/
• 15. Web Componentsとア クセシビリティ 15
• 16. Web Componentsとアクセシビリ ティ コンポーネント…機能や意味を切り出し • 制作者はユーザーに提供したい情報を知っている • ユーザーにきちんと伝えることが重要 16
• 17. コンポーネントのアクセシビリティ が高ければ 使うだけで一定のアクセシビリティを確保 コンポーネント利用時に頑張る必要がない 17
• 18. コンポーネントのアクセシビリティ が低ければ 使うだけで全体の質が低下 コンポーネント利用時に頑張る余地がない 18
• 19. Web Componentsでは… コンポーネントのアクセシビリティが重要 • アクセシビリティの高いコンポーネントを選ぶ • アクセシビリティの高いコンポーネントを作る 19
• 20. Web Componentsのア クセシビリティ 20
• 21. Web Componentsのアクセシビリ ティ アクセシビリティの基本は一緒 21
• 22. https://www.polymer-project.org/articles/accessible-web-components.html 22
• 23. キーボードだけでも使えるか？ 代替コンテンツやセマンティクスは大丈夫か？ 色だけに依存してないか？ 動いたり点滅したりするものは止められるか？ （大意） https://www.polymer-project.org/articles/accessible-web-components.html 23
• 24. Web Componentsのアクセシビリ ティにおける技術的な特徴 セマンティクスの指定方法 24
• 25. 例 HTMＬネイティブ：<progress> 良くない例：<gaia-progress> 良い例：<paper-progress> 25
• 26. 視覚的に伝えてる情報は同じでも… マシンがセマンティクスを読み取れる • HTMLネイティブ • 良い例 セマンティクスを読み取れない • 良くない例 26
• 27. Web Componentsでセマンティクス を指定 Custom Elements Shadow DOM 27
• 28. Custom Elements http://www.w3.org/TR/custom-elements/ 28
• 29. Custom Elementsとは 既存要素の拡張 • <button is="xxx-yyy"></button> • document.createElement("button", "xxx-yyy"); 独自要素の定義 • <xxx-yyy></xxx-yyy> • document.createElement("xxx-yyy"); 29
• 30. Custom Elementsでセマンティクス を指定 既存要素の拡張 • 既存要素のセマンティクスを継承 独自要素の定義 • Shadow DOM 30
• 31. 既存要素の拡張 セマンティクスは既存要素から継承される 基本的に開発者が何かを行う必要はない <button is="xxx-yyy"> <button> セマンティクス：ボタン セマンティクス：ボタン 31
• 32. 例：Google ChromeのDeveloper Tools <button is="text-button"> • セマンティクスはbutton要素のまま 32
• 33. 独自要素の定義 Shadow DOMを使う 33
• 34. Shadow DOM http://www.w3.org/TR/shadow-dom/ 34
• 35. Shadow DOMとは ページのDOMツリーとは切り離された 要素独自のDOMツリー（Shadow Tree） • element.createShadowRoot(); 35
• 36. Shadow DOMの例 36 https://simon.html5.org/presentations/foms-2012/ 動画部分: © Copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
• 37. Shadow DOMの合成ツリー ページの内容：もともとのDOMとShadow DOMを合成したツリー（合成ツリー） 37 http://www.w3.org/TR/shadow-dom
• 38. Shadow DOMのセマンティクス ブラウザー：合成ツリーを知っている ブラウザー：支援技術に合成ツリーのセマン ティクスを提供 開発者：合成ツリーにセマンティクスを提供 38
• 39. 39 https://simon.html5.org/presentations/foms-2012/ 動画部分: © Copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org Shadow DOMの例
• 40. Shadow DOMでセマンティクスを指 定 適切なHTML要素を使えるのであれば、その要 素を利用 適切なHTML要素が使えなければ、WAI-ARIA で補足 40
• 41. 適切なHTML要素を使える場合 41
• 42. 適切なHTML要素が使えない場合 WAI-ARIAを利用 42
• 43. WAI-ARIA 43 http://momdo.github.io/wai-aria/
• 44. WAI-ARIAとは WAI: Web Accessibility Initiative • W3C WAIが標準化 ARIA: Accessible Rich Internet Applications • Webアプリケーションをよりアクセシブルに 44
• 45. WAI-ARIAのセマンティクス ロール：role属性 • 要素の種類 • ≒HTMLの要素型 ステート・プロパティ：aria-*属性 • 要素の状態や性質 • ≒HTMLの属性 45
• 46. 例：プログレスバー ロール： • progressbar プロパティ： • aria-valuemin：最小値 • aria-valuemax：最大値 • aria-valuenow：進捗を表す数値 • aria-valuetext：進捗を表すテキスト 46
• 47. http://momdo.github.io/wai-aria/roles#progressbar 47
• 48. 例：プログレスバー：マークアップ 48 <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
• 49. 例：プログレスバー：更新時 値が変わったとき • aria-valuenowを更新 進捗率が不明な場合 • aria-valuenow属性を指定しない 49
• 50. 例：プログレスバー：更新したマー クアップ 50 <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>
• 51. 良い例 51
• 52. 良くない例 52
• 53. 良くない例を修正した例 53
• 54. 良くない例を修正した例 54 良くない例（修正済）：<gaia-progress>
• 55. まとめ 55
• 56. Web Componentsとアクセシビリ ティ コンポーネント単位でアクセシビリティを確 保しやすくなる可能性 アクセシビリティの品質を維持・管理しやす くなる可能性 56
• 57. Web Componentsのアクセシビリ ティ 本質的にはWeb Componentsを使わない場合 と同じ Custom ElementsやShadow DOMを使用する 際は、セマンティクスをお忘れなく 57
• 58. Web Componentsのアクセシビリ ティ？ Web Componentsでアクセシビリティ！ 58
• 59. アンケートのお願い http://bit.ly/html5C201501 59