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

1. © GNOME Project, @Takenspc 1 アクセシビリティオブジェクトについて 2014年7月13日ブラウザエンジン先端観測会

2. © GNOME Project, @Takenspc 2 自己紹介 ● @Takenspc ● 他の発表者と違って一般人

3. © GNOME Project, @Takenspc 3 今回の内容 ● ブラウザーの「HTML5対応」をアクセシビリティAPI の側面から見る、ための基礎を押さえる

4. © GNOME Project, @Takenspc 4 目次 ● アクセシビリティオブジェクトとは何か ● アクセシビリティオブジェクトの作られ方 ● 「HTML5対応」とは何か

5. © GNOME Project, @Takenspc 5 アクセシビリティオブジェクトとは何か

6. © GNOME Project, @Takenspc 6 アクセシビリティとは何か ● Access + Ability：アクセスできる ● A11YやAXと略される ● Webだけの話ではない

7. © GNOME Project, @Takenspc 7 Webアクセシビリティ ● 誰でもWebにアクセスして使うことができる

8. © GNOME Project, @Takenspc 8 Webへのアクセスコンテンツブラウザーデバイスユーザー

9. © GNOME Project, @Takenspc 9 Webへのアクセスコンテンツブラウザーデバイスユーザー支援技術

10. © GNOME Project, @Takenspc 10 支援技術（Assistive Technology） ● U.S. National Multiple Sclerosis Society – 特定の機能を使いやすくしたり、（そのままでは行えなかった機能を）行えるようにするための、全ての道具、製品、デバイス Pro HTML5 Accessibilityからの孫引き（翻訳は発表者）

11. © GNOME Project, @Takenspc 11 支援技術（Assistive Technology） ● 今回： – WebブラウザーとAPIを介して動作する、Webコンテンツの特定の機能を使いやすくしたり、（そのままでは行えなかった機能を）行えるようにするための、全ての道具、製品、デバイス WAI-ARIA 1.0における定義ともそんなにずれていないと思う。

12. © GNOME Project, @Takenspc 12 支援技術の例 Just Speak（音声によるAndroid端末の操作） TalkBack（スクリーン・リーダー）

13. © GNOME Project, @Takenspc 13 アクセシビリティAPI ● ブラウザーと支援技術が情報や操作のやりとりに使う API ● OS/プラットフォームレベルでのAPI コンテンツブラウザーデバイスユーザー支援技術

14. © GNOME Project, @Takenspc 14 アクセシビリティAPIの種類 ● MSAA (Windows) – IAccessble2 ● UIA (Windows) ● ATK + AT-SPI (Linuxなど) ● OS X Accessibility Protocol (OS X)

15. © GNOME Project, @Takenspc 15 アクセシビリティAPIの特徴 ● アクセシビリティAPIの語彙、セマンティクスは HTMLとは異なる ● ブラウザーがコンテンツをアクセシビリティAPIのオブジェクト（アクセシビリティオブジェクト）に変換

16. © GNOME Project, @Takenspc 16 小まとめ ● ブラウザーと支援技術はアクセシビリティAPIを使って情報や操作をやりとり ● ブラウザーはコンテンツの情報を支援技術に伝える責任コンテンツブラウザーデバイスユーザー支援技術

17. © GNOME Project, @Takenspc 17 アクセシビリティオブジェクトの作られ方

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. © 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. © GNOME Project, @Takenspc 20 アクセシビリティオブジェクトを作るには ● アクセシビリティオブジェクトを作るには – セマンティクスに関する情報 – レイアウトに関する情報の両方が必要

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. © 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. © 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. © GNOME Project, @Takenspc 24 アクセシビリティオブジェクトを作るには ● アクセシビリティオブジェクトを作るには – セマンティクスに関する情報 – レイアウトに関する情報の両方が必要 ● DOMツリーとレンダリングツリーの情報を組み合わせて作る

25. © GNOME Project, @Takenspc 25 アクセシビリティオブジェクトの作られ方変換内部表現ブラウザー支援技術 DOMツリーレンダリングツリーアクセシビリティツリーアクセシビリティツリー支援技術プラットフォーム固有

26. © GNOME Project, @Takenspc 26 アクセシビリティオブジェクトの作られ方変換内部表現ブラウザー支援技術 DOMツリーレンダリングツリーアクセシビリティツリーアクセシビリティツリー支援技術プラットフォーム固有

27. © GNOME Project, @Takenspc 27 Gecko ● アクセシビリティオブジェクトへのアクセス発生 ● アクセシビリティオブジェクトの生成 – DOMツリーをイテレート ● アクセシビリティオブジェクトの生成

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. © GNOME Project, @Takenspc 29 アクセシビリティオブジェクトの生成 ● TreeWalker::NextChildInternal – nsAccessibilityService::GetOrCreateAccessibleを呼び出し（略） Accessible* accessible = mFlags & eWalkCache ? mDoc->GetAccessible(childNode) : GetAccService()->GetOrCreateAccessible(childNode, mContext, &isSubtreeHidden); （略）

30. © GNOME Project, @Takenspc 30 アクセシビリティオブジェクトの生成 ● nsAccessibilityService::GetOrCreateAccessible – 非表示だったらオブジェクトを作らない – テキストノードかどうかを見てオブジェクトを作る – WAI-ARIAの属性を見てオブジェクトを作る – 要素の型や属性を見てオブジェクトを作る – Frameの種類を見てオブジェクトを作る

31. © GNOME Project, @Takenspc 31 WebCore、Blink ● アクセシビリティオブジェクトへのアクセス発生 ● アクセシビリティオブジェクトの生成 – レンダーツリーをイテレート（canvas要素の子孫はDOMツリーをイテレート） ● アクセシビリティオブジェクトの生成

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. © GNOME Project, @Takenspc 33 アクセシビリティオブジェクトの生成 ● AXObjectCache::getOrCreate Blinkの例 AXObject* AXObjectCache::getOrCreate(RenderObject* renderer) { （略） RefPtr<AXObject> newObj = createFromRenderer(renderer); （略） return newObj.get(); }

34. © GNOME Project, @Takenspc 34 アクセシビリティオブジェクトの生成 ● AXObjectCache::createFromRenderer – ノードがWAI-ARIA/HTMLのリスト関連ならばリストのオブジェクトを作る – ノードがWAI-ARIAのgrid関連ならばgridのオブジェクトを作る – rendererのboxの種類をみてオブジェクトを作る ● 表、プログレスバー、メーター、スライダー – 通常のオブジェクトを作る

35. © GNOME Project, @Takenspc 35 アクセシビリティオブジェクトの「役割」 ● AXRenderObject::determineAccessibleRole – WAI-ARIAのrole属性値を見て判定する – ノードの種類やrendererのboxの種類を見て判定するコードが並ぶ

36. © GNOME Project, @Takenspc 36 子孫オブジェクトの生成 ● AXObject::children const AXObject::AccessibilityChildrenVector& AXObject::children() { updateChildrenIfNecessary(); return m_children; } void AXObject::updateChildrenIfNecessary() { if (!hasChildren()) addChildren(); }

37. © GNOME Project, @Takenspc 37 子孫オブジェクトの生成 ● AXRenderObject::addChildren void AXRenderObject::addChildren() { （略） for (RefPtr<AXObject> obj = firstChild(); obj; obj = obj->nextSibling()) addChild(obj.get()); （略） }

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. © GNOME Project, @Takenspc 39 小まとめ ● アクセシビリティオブジェクトを作るには – セマンティクスに関する情報 – レイアウトに関する情報の両方が必要 ● DOMツリーとレンダーツリーの情報を組み合わせて作る

40. © GNOME Project, @Takenspc 40 「HTML5対応」とは何か

41. © GNOME Project, @Takenspc 41 「HTML5対応」 ● 「HTML5対応」には様々な側面がある ● アクセシビリティAPIにおける対応も1つの側面

42. © GNOME Project, @Takenspc 42 「HTML5対応」していないブラウザー ● HTML5のセマンティクスをアクセシビリティオブジェクトにマッピングしない <div> <main> AXRole: AXGroup AXSubrole: なしアクセシビリティオブジェクトの例はOS X Accessibility Protocol HTML AXRole: AXGroup AXSubrole: なしアクセシビリティオブジェクト

43. © GNOME Project, @Takenspc 43 「HTML5対応」しているブラウザー ● HTML5のセマンティクスをアクセシビリティオブジェクトにマッピングする <div> <main> AXRole: AXGroup AXSubrole: AXLandmarkMain アクセシビリティオブジェクトの例はOS X Accessibility Protocol HTML AXRole: AXGroup AXSubrole: なしアクセシビリティオブジェクト

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. © 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/

47. © GNOME Project, @Takenspc 47 実装状況 aria-html mapping implementation status http://stevefaulkner.github.io/html-mapping-tests/

49. © GNOME Project, @Takenspc 49 調査ツール ● プラットフォームのアクセシビリティオブジェクト – inspect、accprobe、aViewer（Windows） – Accessibility Inspector（OS X） ● ブラウザーの内部的なアクセシビリティオブジェクト – DOM Inspector（Gecko） ● WebKit Accessibility Node Inspector（WebCore）

51. © GNOME Project, @Takenspc 51 aViewer Accessibility Viewer (aViewer) | The Paciello Group - Your Accessibility Partner http://www.paciellogroup.com/resources/aviewer

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. © GNOME Project, @Takenspc 53 期待と違う結果が得られる場合 ● そもそも対応していない場合 ● レンダーツリーが影響している場合 ● フラット化が影響している場合レンダリングツリーの影響はAccessibility and the Power of CSS: Disparities between Ideals and Realityなどを参照

54. © GNOME Project, @Takenspc 54 フラット化 ● ブラウザーは重要と判断したノードに対してだけアクセシビリティオブジェクトを作る/支援技術に見せる ● 「重要」かどうかの判断はブラウザー依存 – 開発者やユーザーの期待と違う場合

55. © GNOME Project, @Takenspc 55 AXGroupdiv フラット化しない場合 div h1 Block Block Block AXGroup AXHeading DOMツリーレンダリングツリーアクセシビリティツリー

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; }

62. © GNOME Project, @Takenspc 62 まとめ ● ブラウザーの「HTML5対応」にはアクセシビリティ APIの側面を含めて考える必要 ● ブラウザーにもバグはあるため、温かい目と温かいテストと温かいパッチがあるといいなあ

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

You are reading a preview.

Check these out next

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

More Related Content

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

Recently uploaded (20)