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.

Web Componentsのアクセシビリティ

10,144 views

Published on

2015年1月25日に開催された「HTML5 Conference」での講演「Web Componentsのアクセシビリティ」で使用した資料です。

Published in: Internet
  • Be the first to comment

Web Componentsのアクセシビリティ

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

×