Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 63 Ad

More Related Content

Similar to アクセシビリティオブジェクトについて (20)

Recently uploaded (20)

Advertisement

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

  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 ご清聴ありがとうございました!

×