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.

アクセシビリティオブジェクトについて

3,077 views

Published on

2014年7月13日のブラウザエンジン先端観測会での発表内容です。
http://atnd.org/events/52121

Published in: Engineering
  • Be the first to comment

アクセシビリティオブジェクトについて

  1. 1. © GNOME Project, @Takenspc 1 アクセシビリティオブジェクトについて 2014年7月13日 ブラウザエンジン先端観測会
  2. 2. © GNOME Project, @Takenspc 2 自己紹介 ● @Takenspc ● 他の発表者と違って一般人
  3. 3. © GNOME Project, @Takenspc 3 今回の内容 ● ブラウザーの「HTML5対応」をアクセシビリティAPI の側面から見る、ための基礎を押さえる
  4. 4. © GNOME Project, @Takenspc 4 目次 ● アクセシビリティオブジェクトとは何か ● アクセシビリティオブジェクトの作られ方 ● 「HTML5対応」とは何か
  5. 5. © GNOME Project, @Takenspc 5 アクセシビリティオブジェクトとは何か
  6. 6. © GNOME Project, @Takenspc 6 アクセシビリティとは何か ● Access + Ability:アクセスできる ● A11YやAXと略される ● Webだけの話ではない
  7. 7. © GNOME Project, @Takenspc 7 Webアクセシビリティ ● 誰でもWebにアクセスして使うことができる
  8. 8. © GNOME Project, @Takenspc 8 Webへのアクセス コンテンツ ブラウザー デバイス ユーザー
  9. 9. © GNOME Project, @Takenspc 9 Webへのアクセス コンテンツ ブラウザー デバイス ユーザー支援技術
  10. 10. © GNOME Project, @Takenspc 10 支援技術(Assistive Technology) ● U.S. National Multiple Sclerosis Society – 特定の機能を使いやすくしたり、(そのままでは行えな かった機能を)行えるようにするための、全ての道具、製 品、デバイス Pro HTML5 Accessibilityからの孫引き(翻訳は発表者)
  11. 11. © GNOME Project, @Takenspc 11 支援技術(Assistive Technology) ● 今回: – WebブラウザーとAPIを介して動作する、Webコンテンツ の特定の機能を使いやすくしたり、(そのままでは行えな かった機能を)行えるようにするための、全ての道具、製 品、デバイス WAI-ARIA 1.0における定義ともそんなにずれていないと思う。
  12. 12. © GNOME Project, @Takenspc 12 支援技術の例 Just Speak(音声によるAndroid端末の操作) TalkBack(スクリーン・リーダー)
  13. 13. © GNOME Project, @Takenspc 13 アクセシビリティAPI ● ブラウザーと支援技術が情報や操作のやりとりに使う API ● OS/プラットフォームレベルでのAPI コンテンツ ブラウザー デバイス ユーザー支援技術
  14. 14. © GNOME Project, @Takenspc 14 アクセシビリティAPIの種類 ● MSAA (Windows) – IAccessble2 ● UIA (Windows) ● ATK + AT-SPI (Linuxなど) ● OS X Accessibility Protocol (OS X)
  15. 15. © GNOME Project, @Takenspc 15 アクセシビリティAPIの特徴 ● アクセシビリティAPIの語彙、セマンティクスは HTMLとは異なる ● ブラウザーがコンテンツをアクセシビリティAPIのオ ブジェクト(アクセシビリティオブジェクト)に変換
  16. 16. © GNOME Project, @Takenspc 16 小まとめ ● ブラウザーと支援技術はアクセシビリティAPIを使っ て情報や操作をやりとり ● ブラウザーはコンテンツの情報を支援技術に伝える責 任 コンテンツ ブラウザー デバイス ユーザー支援技術
  17. 17. © GNOME Project, @Takenspc 17 アクセシビリティオブジェクトの作られ方
  18. 18. © GNOME Project, @Takenspc 18 アクセシビリティツリー Alex's blog: DOM Inspector as accessibility tool http://asurkov.blogspot.jp/2012/02/dom-inspector-as-accessibility-tool.html
  19. 19. © GNOME Project, @Takenspc 19 アクセシビリティオブジェクトの情報 ● 役割:種類 ● 状態:動的な属性 ● プロパティ:静的な属性 ● その他 – 位置と大きさ、文字の大きさ、色… Alex's blog: DOM Inspector for accessibility. New features. http://asurkov.blogspot.jp/2013/02/dom-inspector-for-accessibility-new.html
  20. 20. © GNOME Project, @Takenspc 20 アクセシビリティオブジェクトを作るには ● アクセシビリティオブジェクトを作るには – セマンティクスに関する情報 – レイアウトに関する情報 の両方が必要
  21. 21. © GNOME Project, @Takenspc 21 レンダリングエンジンの処理 How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  22. 22. © GNOME Project, @Takenspc 22 レンダリングエンジンの処理 How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  23. 23. © GNOME Project, @Takenspc 23 レンダリングエンジンの処理 Efficient CSS Animations [Slide 2 of 29: The Pipeline from Markup to Graphics] http://dbaron.org/talks/2014-06-04-cssday/slide-2.xhtml
  24. 24. © GNOME Project, @Takenspc 24 アクセシビリティオブジェクトを作るには ● アクセシビリティオブジェクトを作るには – セマンティクスに関する情報 – レイアウトに関する情報 の両方が必要 ● DOMツリーとレンダリングツリーの情報を組み合わ せて作る
  25. 25. © GNOME Project, @Takenspc 25 アクセシビリティオブジェクトの作られ方 変換 内部表現 ブラウザー 支援 技術 DOMツリー レンダリング ツリー アクセシビリティ ツリー アクセシビリティ ツリー 支援技術 プラットフォーム固有
  26. 26. © GNOME Project, @Takenspc 26 アクセシビリティオブジェクトの作られ方 変換 内部表現 ブラウザー 支援 技術 DOMツリー レンダリング ツリー アクセシビリティ ツリー アクセシビリティ ツリー 支援技術 プラットフォーム固有
  27. 27. © GNOME Project, @Takenspc 27 Gecko ● アクセシビリティオブジェクトへのアクセス発生 ● アクセシビリティオブジェクトの生成 – DOMツリーをイテレート ● アクセシビリティオブジェクトの生成
  28. 28. © GNOME Project, @Takenspc 28 DOMツリーをイテレート ● mozilla::a11y::TreeWalker void Accessible::CacheChildren() { (略) TreeWalker walker(this, mContent); Accessible* child = nullptr; while ((child = walker.NextChild()) && AppendChild(child)); }
  29. 29. © GNOME Project, @Takenspc 29 アクセシビリティオブジェクトの生成 ● TreeWalker::NextChildInternal – nsAccessibilityService::GetOrCreateAccessibleを呼び出 し (略) Accessible* accessible = mFlags & eWalkCache ? mDoc->GetAccessible(childNode) : GetAccService()->GetOrCreateAccessible(childNode, mContext, &isSubtreeHidden); (略)
  30. 30. © GNOME Project, @Takenspc 30 アクセシビリティオブジェクトの生成 ● nsAccessibilityService::GetOrCreateAccessible – 非表示だったらオブジェクトを作らない – テキストノードかどうかを見てオブジェクトを作る – WAI-ARIAの属性を見てオブジェクトを作る – 要素の型や属性を見てオブジェクトを作る – Frameの種類を見てオブジェクトを作る
  31. 31. © GNOME Project, @Takenspc 31 WebCore、Blink ● アクセシビリティオブジェクトへのアクセス発生 ● アクセシビリティオブジェクトの生成 – レンダーツリーをイテレート (canvas要素の子孫はDOMツリーをイテレート) ● アクセシビリティオブジェクトの生成
  32. 32. © GNOME Project, @Takenspc 32 アクセシビリティオブジェクトの生成 ● WebDocument::accessibilityObject Chromiumの例 WebAXObject WebDocument::accessibilityObject() const { const Document* document = constUnwrap<Document>(); return WebAXObject(document->axObjectCache()- >getOrCreate(document->renderView())); }
  33. 33. © GNOME Project, @Takenspc 33 アクセシビリティオブジェクトの生成 ● AXObjectCache::getOrCreate Blinkの例 AXObject* AXObjectCache::getOrCreate(RenderObject* renderer) { (略) RefPtr<AXObject> newObj = createFromRenderer(renderer); (略) return newObj.get(); }
  34. 34. © GNOME Project, @Takenspc 34 アクセシビリティオブジェクトの生成 ● AXObjectCache::createFromRenderer – ノードがWAI-ARIA/HTMLのリスト関連ならばリストのオブ ジェクトを作る – ノードがWAI-ARIAのgrid関連ならばgridのオブジェクトを作る – rendererのboxの種類をみてオブジェクトを作る ● 表、プログレスバー、メーター、スライダー – 通常のオブジェクトを作る
  35. 35. © GNOME Project, @Takenspc 35 アクセシビリティオブジェクトの「役割」 ● AXRenderObject::determineAccessibleRole – WAI-ARIAのrole属性値を見て判定する – ノードの種類やrendererのboxの種類を見て判定するコード が並ぶ
  36. 36. © GNOME Project, @Takenspc 36 子孫オブジェクトの生成 ● AXObject::children const AXObject::AccessibilityChildrenVector& AXObject::children() { updateChildrenIfNecessary(); return m_children; } void AXObject::updateChildrenIfNecessary() { if (!hasChildren()) addChildren(); }
  37. 37. © GNOME Project, @Takenspc 37 子孫オブジェクトの生成 ● AXRenderObject::addChildren void AXRenderObject::addChildren() { (略) for (RefPtr<AXObject> obj = firstChild(); obj; obj = obj->nextSibling()) addChild(obj.get()); (略) }
  38. 38. © GNOME Project, @Takenspc 38 子孫オブジェクトの生成 ● AXRenderObject::nextSibling – Case 1: node is a block and has an inline continuation. – Case 2: Anonymous block parent of the start of a continuation – Case 3: node has an actual next sibling – Case 4: node is an inline with a continuation. – Case 5: node has no next sibling, and its parent is an inline with a continuation. ● Case 5a: continuation is a block ● Case 5b: continuation is an inline 隣接RenderObjectを取りに行く
  39. 39. © GNOME Project, @Takenspc 39 小まとめ ● アクセシビリティオブジェクトを作るには – セマンティクスに関する情報 – レイアウトに関する情報 の両方が必要 ● DOMツリーとレンダーツリーの情報を組み合わせて 作る
  40. 40. © GNOME Project, @Takenspc 40 「HTML5対応」とは何か
  41. 41. © GNOME Project, @Takenspc 41 「HTML5対応」 ● 「HTML5対応」には様々な側面がある ● アクセシビリティAPIにおける対応も1つの側面
  42. 42. © GNOME Project, @Takenspc 42 「HTML5対応」していないブラウザー ● HTML5のセマンティクスをアクセシビリティオブ ジェクトにマッピングしない <div> <main> AXRole: AXGroup AXSubrole: なし アクセシビリティオブジェクトの例はOS X Accessibility Protocol HTML AXRole: AXGroup AXSubrole: なし アクセシビリティオブジェクト
  43. 43. © GNOME Project, @Takenspc 43 「HTML5対応」しているブラウザー ● HTML5のセマンティクスをアクセシビリティオブ ジェクトにマッピングする <div> <main> AXRole: AXGroup AXSubrole: AXLandmarkMain アクセシビリティオブジェクトの例はOS X Accessibility Protocol HTML AXRole: AXGroup AXSubrole: なし アクセシビリティオブジェクト
  44. 44. © GNOME Project, @Takenspc 44 HTML to Platform Accessibility APIs Implementation Guide HTML to Platform Accessibility APIs Implementation Guide http://www.w3.org/TR/html-aapi/
  45. 45. © GNOME Project, @Takenspc 45 HTML to Platform Accessibility APIs Implementation Guide HTML to Platform Accessibility APIs Implementation Guide http://www.w3.org/TR/html-aapi/
  46. 46. © GNOME Project, @Takenspc 46 実装状況 HTML5 accessibility - work in progress March 2014 http://html5accessibility.com/
  47. 47. © GNOME Project, @Takenspc 47 実装状況 aria-html mapping implementation status http://stevefaulkner.github.io/html-mapping-tests/
  48. 48. © GNOME Project, @Takenspc 48 アクセシビリティオブジェクトの調査 ● コンテンツからはアクセスできない ● ツールを使って調査可能
  49. 49. © GNOME Project, @Takenspc 49 調査ツール ● プラットフォームのアクセシビリティオブジェクト – inspect、accprobe、aViewer(Windows) – Accessibility Inspector(OS X) ● ブラウザーの内部的なアクセシビリティオブジェクト – DOM Inspector(Gecko) ● WebKit Accessibility Node Inspector(WebCore)
  50. 50. © GNOME Project, @Takenspc 50 ツールによる調査対象の違い 変換 内部表現 ブラウザー 支援 技術 DOMツリー レンダリング ツリー アクセシビリティ ツリー アクセシビリティ ツリー 支援技術 プラットフォーム固有
  51. 51. © GNOME Project, @Takenspc 51 aViewer Accessibility Viewer (aViewer) | The Paciello Group - Your Accessibility Partner http://www.paciellogroup.com/resources/aviewer
  52. 52. © GNOME Project, @Takenspc 52 DOM Inspector Alex's blog: DOM Inspector as accessibility tool http://asurkov.blogspot.jp/2012/02/dom-inspector-as-accessibility-tool.html
  53. 53. © GNOME Project, @Takenspc 53 期待と違う結果が得られる場合 ● そもそも対応していない場合 ● レンダーツリーが影響している場合 ● フラット化が影響している場合 レンダリングツリーの影響はAccessibility and the Power of CSS: Disparities between Ideals and Realityな どを参照
  54. 54. © GNOME Project, @Takenspc 54 フラット化 ● ブラウザーは重要と判断したノードに対してだけアク セシビリティオブジェクトを作る/支援技術に見せる ● 「重要」かどうかの判断はブラウザー依存 – 開発者やユーザーの期待と違う場合
  55. 55. © GNOME Project, @Takenspc 55 AXGroupdiv フラット化しない場合 div h1 Block Block Block AXGroup AXHeading DOMツリー レンダリングツリー アクセシビリティツリー
  56. 56. © GNOME Project, @Takenspc 56 フラット化する場合 div div h1 Block Block Block AXHeading DOMツリー レンダリングツリー アクセシビリティツリー
  57. 57. © GNOME Project, @Takenspc 57 HTML5では… div main h1 Block Block Block AXGroup AXHeading DOMツリー レンダリングツリー アクセシビリティツリー
  58. 58. © GNOME Project, @Takenspc 58 WebKitのバグ Block Block Block AXHeading DOMツリー レンダリングツリー アクセシビリティツリー div main h1
  59. 59. © GNOME Project, @Takenspc 59 WebKitのバグ ● AccessibilityRenderObject::computeAccessibilityI sIgnoredのHTML5への対応が甘い bool AccessibilityRenderObject::computeAccessibilityIsIgnored() const { (略) // By default, objects should be ignored so that the AX hierarchy is not // filled with unnecessary items. return true; }
  60. 60. © GNOME Project, @Takenspc 60 お前、文句言うだけかよ… ● ごめんなさいごめんなさい
  61. 61. © GNOME Project, @Takenspc 61 小まとめ ● ブラウザーにはHTML5のセマンティクスをアクセシ ビリティオブジェクトにマッピングする責任
  62. 62. © GNOME Project, @Takenspc 62 まとめ ● ブラウザーの「HTML5対応」にはアクセシビリティ APIの側面を含めて考える必要 ● ブラウザーにもバグはあるため、温かい目と温かいテ ストと温かいパッチがあるといいなあ
  63. 63. © GNOME Project, @Takenspc 63 ご清聴ありがとうございました!

×