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/

46.
© GNOME Project, @Takenspc 46
実装状況
HTML5 accessibility - work in progress March 2014
http://html5accessibility.com/

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

48.
© GNOME Project, @Takenspc 48
アクセシビリティオブジェクトの調査
● コンテンツからはアクセスできない
● ツールを使って調査可能

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

50.
© GNOME Project, @Takenspc 50
ツールによる調査対象の違い
変換
内部表現
ブラウザー
支援
技術
DOMツリー
レンダリング
ツリー
アクセシビリティ
ツリー
アクセシビリティ
ツリー
支援技術
プラットフォーム固有

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ツリー レンダリングツリー アクセシビリティツリー

56.
© GNOME Project, @Takenspc 56
フラット化する場合
div
div
h1
Block
Block
Block
AXHeading
DOMツリー レンダリングツリー アクセシビリティツリー

57.
© GNOME Project, @Takenspc 57
HTML5では…
div
main
h1
Block
Block
Block
AXGroup
AXHeading
DOMツリー レンダリングツリー アクセシビリティツリー

58.
© GNOME Project, @Takenspc 58
WebKitのバグ
Block
Block
Block
AXHeading
DOMツリー レンダリングツリー アクセシビリティツリー
div
main
h1

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.
© GNOME Project, @Takenspc 60
お前、文句言うだけかよ…
● ごめんなさいごめんなさい

61.
© GNOME Project, @Takenspc 61
小まとめ
● ブラウザーにはHTML5のセマンティクスをアクセシ
ビリティオブジェクトにマッピングする責任

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

63.
© GNOME Project, @Takenspc 63
ご清聴ありがとうございました！