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

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

自己紹介
● @Takenspc
● 他の発表者と違って一般人

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

目次
● アクセシビリティオブジェクトとは何か
● アクセシビリティオブジェクトの作られ方
● 「HTML5対応」とは何か

アクセシビリティオブジェクトとは何か

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

Webアクセシビリティ
● 誰でもWebにアクセスして使うことができる

Webへのアクセス
コンテンツブラウザーデバイスユーザー

Webへのアクセス
コンテンツブラウザーデバイスユーザー支援技術

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

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

支援技術の例
Just Speak（音声によるAndroid端末の操作） TalkBack（スクリーン・リーダー）

アクセシビリティAPI
● ブラウザーと支援技術が情報や操作のやりとりに使う
API
● OS/プラットフォームレベルでのAPI

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

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

小まとめ
● ブラウザーと支援技術はアクセシビリティAPIを使っ
て情報や操作をやりとり
● ブラウザーはコンテンツの情報を支援技術に伝える責
任

アクセシビリティオブジェクトの作られ方

アクセシビリティツリー
Alex's blog: DOM Inspector as accessibility tool
http://asurkov.blogspot.jp/2012/02/dom-inspector-as-accessibility-tool.html

アクセシビリティオブジェクトの情報
● 役割：種類
● 状態：動的な属性
● プロパティ：静的な属性
● その他
– 位置と大きさ、文字の大きさ、色…
Alex's blog: DOM Inspector for accessibility. New features.
http://asurkov.blogspot.jp/2013/02/dom-inspector-for-accessibility-new.html

アクセシビリティオブジェクトを作るには
● アクセシビリティオブジェクトを作るには
– セマンティクスに関する情報
– レイアウトに関する情報
の両方が必要

レンダリングエンジンの処理
How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Efficient CSS Animations [Slide 2 of 29: The Pipeline from Markup to Graphics]
http://dbaron.org/talks/2014-06-04-cssday/slide-2.xhtml

アクセシビリティオブジェクトを作るには
の両方が必要
● DOMツリーとレンダリングツリーの情報を組み合わ
せて作る

変換
内部表現
ブラウザー
支援
技術
DOMツリー
レンダリング
ツリー
アクセシビリティ
ツリー
ツリー
支援技術
プラットフォーム固有

変換
内部表現
ブラウザー
支援
技術
DOMツリー
レンダリング
ツリー
ツリー
ツリー
支援技術

Gecko
● アクセシビリティオブジェクトへのアクセス発生
● アクセシビリティオブジェクトの生成
– DOMツリーをイテレート

DOMツリーをイテレート
● mozilla::a11y::TreeWalker
void
Accessible::CacheChildren()
{
（略）
TreeWalker walker(this, mContent);
Accessible* child = nullptr;
while ((child = walker.NextChild()) && AppendChild(child));
}

アクセシビリティオブジェクトの生成
● TreeWalker::NextChildInternal
– nsAccessibilityService::GetOrCreateAccessibleを呼び出
し
（略）
Accessible* accessible = mFlags & eWalkCache ?
mDoc->GetAccessible(childNode) :
GetAccService()->GetOrCreateAccessible(childNode, mContext,
&isSubtreeHidden);
（略）

● nsAccessibilityService::GetOrCreateAccessible
– 非表示だったらオブジェクトを作らない
– テキストノードかどうかを見てオブジェクトを作る
– WAI-ARIAの属性を見てオブジェクトを作る
– 要素の型や属性を見てオブジェクトを作る
– Frameの種類を見てオブジェクトを作る

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

● WebDocument::accessibilityObject
Chromiumの例
WebAXObject WebDocument::accessibilityObject() const
{
const Document* document = constUnwrap<Document>();
return WebAXObject(document->axObjectCache()-
>getOrCreate(document->renderView()));
}

● AXObjectCache::getOrCreate
Blinkの例
AXObject* AXObjectCache::getOrCreate(RenderObject* renderer)
{
（略）
RefPtr<AXObject> newObj = createFromRenderer(renderer);
（略）
return newObj.get();
}

● AXObjectCache::createFromRenderer
– ノードがWAI-ARIA/HTMLのリスト関連ならばリストのオブ
ジェクトを作る
– ノードがWAI-ARIAのgrid関連ならばgridのオブジェクトを作る
– rendererのboxの種類をみてオブジェクトを作る
● 表、プログレスバー、メーター、スライダー
– 通常のオブジェクトを作る

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

子孫オブジェクトの生成
● AXObject::children
const AXObject::AccessibilityChildrenVector& AXObject::children()
{
updateChildrenIfNecessary();
return m_children;
}
void AXObject::updateChildrenIfNecessary()
{
if (!hasChildren())
addChildren();
}

● AXRenderObject::addChildren
void AXRenderObject::addChildren()
{
（略）
for (RefPtr<AXObject> obj = firstChild(); obj; obj = obj->nextSibling())
addChild(obj.get());
（略）
}

● 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を取りに行く

小まとめ
の両方が必要
● DOMツリーとレンダーツリーの情報を組み合わせて
作る

「HTML5対応」とは何か

「HTML5対応」
● 「HTML5対応」には様々な側面がある
● アクセシビリティAPIにおける対応も1つの側面

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

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

HTML to Platform Accessibility APIs
Implementation Guide
HTML to Platform Accessibility APIs Implementation Guide
http://www.w3.org/TR/html-aapi/

実装状況
HTML5 accessibility - work in progress March 2014
http://html5accessibility.com/

実装状況
aria-html mapping implementation status
http://stevefaulkner.github.io/html-mapping-tests/

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

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

ツールによる調査対象の違い
変換
内部表現
ブラウザー
支援
技術
DOMツリー
レンダリング
ツリー
ツリー
ツリー
支援技術

aViewer
Accessibility Viewer (aViewer) | The Paciello Group - Your Accessibility Partner
http://www.paciellogroup.com/resources/aviewer

DOM Inspector
Alex's blog: DOM Inspector as accessibility tool
http://asurkov.blogspot.jp/2012/02/dom-inspector-as-accessibility-tool.html

期待と違う結果が得られる場合
● そもそも対応していない場合
● レンダーツリーが影響している場合
● フラット化が影響している場合
レンダリングツリーの影響はAccessibility and the Power of CSS: Disparities between Ideals and Realityな
どを参照

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

AXGroupdiv
フラット化しない場合
div
h1
Block
Block
Block
AXGroup
AXHeading
DOMツリーレンダリングツリーアクセシビリティツリー

フラット化する場合
div
div
h1
Block
Block
Block
AXHeading

HTML5では…
div
main
h1
Block
Block
Block
AXGroup
AXHeading

WebKitのバグ
Block
Block
Block
AXHeading
div
main
h1

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

お前、文句言うだけかよ…
● ごめんなさいごめんなさい

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

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

ご清聴ありがとうございました！

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

Recommended

Recommended

More Related Content

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

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

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