この文書は、「WAI-ARIA Graphics Module （W3C Recommendation 2018-10-02 ）」の日本語訳です。日本語訳は参考情報であって、公式な文書ではありません。また、翻訳に誤りがありえます。
訳者への連絡先、他の仕様の翻訳等については、Wiki を参照ください。
概要
支援技術は、障害のある人に適切な情報を伝えるために、文書の構造および期待される動作に関するセマンティックな情報を必要とする。この仕様は、ウェブグラフィックに固有の中核となるロール のWAI-ARIA 1.1WAI-ARIA-1.1 HTML [HTML52 SVG [SVG2
この文書は、WAI-ARIA OverviewWAI-ARIA スイートの一部と位置付けられている。
目次 1. 導入1.1 対象読者1.2 ユーザーエージェントのサポート1.3 WAI-ARIA とホスト言語の相互進化1.4 オーサリングプラクティス1.4.1 オーサリングツール1.4.2 プラクティスおよびツールのテスト1.5 支援技術2. 適合性3. 重要な用語4. グラフィックロール4.1 ロールの定義4.2 グラフィックへの他のロール5. ステートおよびプロパティA. 変更ログA.1 Substantive changes since the last public working draft A.2 Other substantive changes since the First Public Working Draft B. 謝辞B.1 発行時点のSVG アクセシビリティタスクフォースでアクティブな参加者B.2 発行時点のARIA WGでアクティブな参加者B.3 資金提供者の権利C. 参考文献C.1 規範規格C.2 参考文献
4. グラフィックロール
このセクションでは、WAI-ARIA ロール タクソノミー への追加を定義し、すべてのロール の特性とプロパティについて説明する。このモジュールで提供されるフィールドの説明については、ARIAロール を参照のこと。
著者は、支援技術に提示される内容に影響を与えたり、ロールおよびプロパティの使用を通じてナビゲーションに影響を与えたりすることができる。これには、要素にセマンティックの重要性がないとマークする機能が含まれる。グラフィックの場合、すべての要素を提示およびナビゲートすると、グラフィックの理解および使用が難しくなる場合が多くある。
著者は、ロールnonepresentationimggraphics-symbolDOM 構造がアクセシビリティツリーから省略される。これは、ロール特性表の「子のプレゼンテーション」値で示される。最後に、グラフィック言語のネイティブセマンティクスでは、セマンティックデータがアタッチされていないDOM 構造をデフォルトで無視することもある。 SVG の場合、これは Accessibility API Mappings仕様 [SVG-AAM-1.0
すべての場合において、プレゼンテーションと見なされるためには、要素はインタラクティブであってはならず、アクセシブルなプロパティまたは代替テキストを割り当てられてはならない。インタラクティブ要素またはWAI-ARIAステートおよびプロパティをもつ要素については、ロールnoneまたはpresentationは無視される。
4.1 ロールの定義
以下は、この仕様で定義されるWAI-ARIA ロール のアルファベット順のリストである。これらは通常、WAI-ARIA で定義された他のロールと組み合わせて使用され、ドキュメント内のグラフィックやリッチインターネットアプリケーションに注釈を付ける[WAI-ARIA-1.1
graphics-document
コンテンツの視覚的な外観またはレイアウトが意味を伝えるdocument
graphics-object
セマンティックな意味をもつ個別のオブジェクトまたはサブコンポーネントを表すgraphics-document
graphics-symbol
単純な意味またはカテゴリーを伝えるために使用されるグラフィックオブジェクト。ここで、意味は特定の視覚的外観よりも重要である。チャートや地図など、より大きな構造化グラフィックのコンポーネントであってもよい。 シンボル自体は分割不能なオブジェクトである。子はプレゼンテーション的となる。
graphics-document （ロール）
コンテンツの視覚的な外観またはレイアウトが意味を伝えるdocument
他のdocument型と同様に、graphics-documentロールは、関連情報を含むページの領域のルート要素に適用され、ユーザーの主要なインタラクションモードは、アプリケーションを制御するよりもむしろ、文書を閲覧することが期待される。このロールをもつ要素は、文書ファイルのルート要素、またはその中にネストされた構造のルート要素であってもよい。
graphics-documentは、次のように同様の役割と区別される場合がある：
他の文書と比較して、graphics-documentは、その視覚的（通常は2次元）提示のセマンティックの重要性によって区別される。ユーザーエージェントおよび支援技術は、グラフィックのナビゲーションをサポートするときにこれを考慮すべきである 。文書を再フォーマットまたはスタイル変更するアクセシビリティ技術は、セマンティックなロールとそのコンテンツの関係とを一致させる方法を除いて、graphics-documentのレイアウトを変更すべきでない 。
imggraphics-documentは、コンテンツの構造化された性質によって区別される。その子要素にはセマンティックな意味があり、リンクまたはその他のインタラクティブなウィジェットを含んでもよい。
graphics-objectgraphics-documentは自己完結型である。その意味は、周囲のコンテンツから分離されても持続する。graphics-documentロールをもつ要素は、子コンテンツの解釈のスコープおよびコンテキストを定義する。
一般に、著者は、チャート、地図、ダイアグラム、テクニカルドローイング、ブループリント、説明用グラフィックスなどの構造化グラフィックスに対してgraphics-documentロールを使用すべきである 。しかし、1つの大きなグラフィックが意味を犠牲にすることなく安全に再配置できる個別の領域を持つ場合、それらの各領域は、個別のgraphics-documentとなるべきである 。代替ロール（figuregraphics-documentがもう1つのgraphics-document内にネストされもよい。たとえば、地図に埋め込まれた棒グラフまたはチャートパネルのマトリックスはロールgraphics-documentを持つべきである。ネストされたドキュメントはカプセル化を提供する。内側および外側のグラフィックのコンポーネント間のナビゲーションは明示的であるべきである。
注
ARIA 1.0仕様に基づくユーザーエージェントおよび支援技術をサポートするために、著者は、documentロールをrole="graphics-document document"の形式でフォールバック値として含めたいことがある。
将来の仕様では、特別なセマンティック構造を持つ特定の型のグラフィカルドキュメントに対して、より具体的なロールを定義する可能性がある。 これらのより具体的なロールは、graphics-documentのサブクラスになるだろう。
電気回路のSVG ダイアグラムは、単純なグラフィックドキュメントである：
<svg xmlns ="https://www.w3.org/2000/svg"
width ="400" height ="200" viewBox ="0 0 200 100"
role ="graphics-document document" >
<title > A simple circuit</title >
<desc > A circuit with one source, one switch, and one load</desc >
<style type ="text/css" >
</style >
<g id ="battery-1" role ="graphics-symbol img"
aria-roledescription ="source" aria-label ="battery"
transform ="translate(20,50)" >
<path d ="M-15,-5 h30 M-5,5 h10" />
</g >
<path id ="wire-1" role ="graphics-symbol img"
aria-label ="wire connecting"
aria-labelledby ="wire-1 battery-1 switch-1"
class ="wire" d ="M20,45 V20 H90" />
</svg >
特性：
特性
値
スーパークラスロール：
document
関連する概念：
継承されるステートおよびプロパティ：
名前の由来：
著者
アクセシブルな名前要求：
True
子のプレゼンテーション：
False
graphics-object (role)
セマンティックな意味をもつ個別のオブジェクトまたはサブコンポーネントを表すgraphics-document
切断されたオブジェクトのコレクションを表すコンテナ要素には、代わりにgrouplistdivまたはSVG g）には、ロールを付与すべきでない 。 ロールの欠如は、ロールnonepresentation
graphics-documentとは異なり、graphics-objectは自己完結型である必要はなく、ナビゲーションへの新しいコンテキストを確立しない。 しかし、ユーザーエージェントおよび支援技術は、ユーザー、特に非視覚的ユーザーが、ネストされたリストと同様に、オブジェクトのネストされた構造を階層的にナビゲートする方法を提供すべきである 。
注
ARIA 1.0仕様に基づくユーザーエージェントおよび支援技術をサポートするために、著者は、groupロールをrole="graphics-object group"の形式でフォールバック値として含めたいことがある。
次のコードは、構造化グラフィックのマークアップの一部である。 さまざまなロールをもつSVG gグループ化要素が含まれている。
家、そのドア、屋根などの個別のオブジェクトへのgraphics-object。
ウィンドウまたはツリー（複数の異なるオブジェクト）を単一のラベルまたは説明でグループ化するためのgroup。
全体として記述されている背景へのimg
セマンティックな意味をもたずにスタイルまたは変換を適用する要素への
none。
グラフィカルオブジェクトに複数のサブコンポーネントがある場合、グループロールは明示的なフォールバックとして提供される。
<svg xmlns ="https://www.w3.org/2000/svg"
width ="600" height ="400" viewBox ="0 0 600 400"
role ="graphics-document document" xml:lang ="en" >
<title > Home</title >
<g role ="img" aria-label ="background" >
<desc > Blue sky, sunshine, and green grass</desc >
<rect fill ="lightSkyBlue" height ="100%" width ="100%" />
<circle fill ="yellow" stroke ="gold" stroke-width ="4"
cx ="0" cy ="0" r ="50" />
<path fill ="none" stroke ="gold" stroke-width ="3"
d ="..." />
<rect fill ="#6a2" y ="300" width ="100%" height ="100" />
</g >
<g role ="graphics-object group"
aria-labelledby ="house-label"
transform ="translate(100,325)" >
<desc > A two-storey brick house, drawn with basic shapes.
</desc >
<rect fill ="firebrick" stroke ="darkRed"
width ="300" height ="200" y ="-200"
role ="none" />
<g role ="graphics-object" aria-label ="door"
transform ="translate(30,-90)" >
<desc > The brown door on the left side of the building
has a window and a round doorknob</desc >
<rect fill ="darkKhaki" stroke ="#632"
width ="50" height ="90" />
<rect fill ="lightSteelBlue" stroke ="#632" stroke-width ="4"
x ="5" y ="5" width ="40" height ="30" />
<circle fill ="gray" stroke ="#444" stroke-width ="0.7"
cx ="10" cy ="50" r ="4" />
</g >
<g role ="group" aria-label ="windows"
fill ="lightSteelBlue" stroke ="#632" stroke-width ="6" >
<g role ="none" transform ="translate(0,-85)" >
<rect aria-label ="first-floor window"
x ="100" width ="25" height ="45" >
<desc > A small window beside the door</desc >
</rect >
<path aria-label ="first-floor living-room window"
d ="M180,0h100v60h-100v-60z
m30,0v60 m40,0v-60" >
<desc > A large three-pane window fills
the rest of the first floor</desc >
</path >
</g >
<g role ="none" transform ="translate(0,-180)" >
</g >
</g >
<text id ="house-label"
font-family ="cursive" font-size ="36px"
x ="70" y ="50" > My House</text >
</g >
</svg >
特性：
特性
値
スーパークラスロール：
group
関連する概念：
継承されるステートおよびプロパティ：
名前の由来：
アクセシブルな名前要求：
False
子のプレゼンテーション：
False
graphics-symbol (role)
単純な意味またはカテゴリーを伝えるために使用されるグラフィックオブジェクト。ここで、意味は特定の視覚的外観よりも重要である。チャートや地図など、より大きな構造化グラフィックのコンポーネントであってもよい。 シンボル自体は分割不能なオブジェクトである。子はプレゼンテーション的となる。
構造化シンボリック言語の一部として使用する場合、aria-roledescriptionWAI-ARIA-1.1
注
ARIA 1.0仕様に基づくユーザーエージェントおよび支援技術をサポートするために、要素のデフォルトのセマンティックロールにまだなっていない場合、著者は、imgrole="graphics-symbol img"の形式でフォールバック値として含めたいことがある。
電気回路のSVG ダイアグラム内では、この電球のようなバッテリー、スイッチ、および負荷を表すグラフィックはそれぞれシンボルである。
<g id="lightbulb-1" role="graphics-symbol img"
aria-roledescription="load"
aria-label="lightbulb"
aria-labelledby="lightbulb-1 lightbulb-1-label"
transform="translate(180,50)" >
<text id ="lightbulb-1-label"
x ="-15" dy ="0.5ex" text-anchor ="end" > 10W</text > "10" />
<path d ="M0,-10 C0,8 5,8 5,0 C5,-8 0,-8 0,10" />
</g >
この例において、可視テキストが親シンボルのラベルに含まれなければならないことに注意する。graphics-symbol
建築設計図スタイルのSVG ダイアグラム内で、単純なSVG symbolのコピーを作成する各SVG use要素はgraphics-symbolである：
<svg xmlns ="http://www.w3.org/2000/svg"
xmlns:xlink ="http://www.w3.org/1999/xlink"
width ="400" height ="300" viewBox ="0 0 400 300"
role ="graphics-document document" xml:lang ="en" >
<title > Room with 5 outlets</title >
<desc > Schematic showing the minimum number and position of
electrical outlets for a mid-sized room with one door.
</desc >
<defs >
<symbol id ="outlet" viewBox ="0 0 30 20"
stroke ="#000" stroke-width ="1.5" pointer-events ="all" >
<desc > The symbol for an electrical outlet is a circle with
a plug shape overlaid on top. The plug consists of two horizontal
lines extending from a vertical line.</desc >
<circle cx ="15" cy ="10" r ="9" fill ="none" />
<line x1 ="1" y1 ="7" x2 ="29" y2 ="7" />
<line x1 ="1" y1 ="13" x2 ="29" y2 ="13" />
<line x1 ="1" y1 ="1" x2 ="1" y2 ="19" />
</symbol >
</defs >
<g role ="group" >
<use xlink:href ="#outlet" role ="graphics-symbol img"
x ="100" y ="15" width ="45" height ="30" >
<title > Electrical outlet</title >
<desc > on West side of North wall</desc >
</use >
<use xlink:href ="#outlet" role ="graphics-symbol img"
x ="250" y ="15" width ="45" height ="30" >
<title > Electrical outlet</title >
<desc > on East side of North wall</desc >
</use >
</g >
</svg >
特性：
特性
値
スーパークラスロール：
img
関連する概念：
symbol
継承されるステートおよびプロパティ：
名前の由来：
著者
アクセシブルな名前要求：
True
子のプレゼンテーション：
True
4.2 グラフィックへの他のロール ARIA 1.1 [WAI-ARIA-1.1
imggraphics-documentgraphics-symbol
figureimgまたはgraphics-documentロールをもつ1つ以上の要素が含まれるが、テキストキャプション、クレジット、またはその他の関連コンテンツが含まれる場合もある。
次の例は、文書でimg、figure、およびgraphics-documentの適切な使用法を示す。
HTML 5 文書内では、インラインSVG が分割不能なimgを表す場合がある。グラフィックスがテキストの自然な読み上げフローの一部である場合、最初の例のように、このロールで十分である：
<p > A repeating SVG gradient is defined using the
<code > spreadMethod</code > attribute.
A value of <code > repeat</code > causes the color stops
to repeat in the same order, from beginning to end:</p >
<svg class ="inline-example" role ="img" >
<title > A repeating linear gradient</title >
<desc > The gradient starts dark, slowly shifting to light,
then quickly dark again. This pattern repeats four
times left to right, each time brightening across a large
region and then getting dark within a short space.
</desc >
<linearGradient id ="repeat" x2 ="25%" spreadMethod ="repeat" >
<stop offset ="0" stop-color ="black" />
<stop offset ="0.8" stop-color ="white" />
<stop offset ="1" stop-color ="black" />
</linearGradient >
<rect width ="100%" height ="100%" fill ="url(#repeat)" />
</svg >
次の例は同じコンテンツを提供するが、段落テキストのフローとは別に再配置できる図として構成されている。
<figure id ="fig1" role ="figure region" >
<svg id ="fig1A" class ="nested-figure" role ="figure"
aria-labelledby ="fig1-caption, fig1A-caption" >
</svg >
<svg id ="fig1B" class ="nested-figure" role ="figure"
aria-labelledby ="fig1-caption, fig1B-caption" >
<linearGradient id ="reflect" spreadMethod ="reflect"
xlink:href ="#repeat" />
<text id ="fig1B-caption" class ="caption" dy ="1em"
> b) spreadMethod="reflect"</text >
<rect role ="img"
y ="25%" width ="100%" height ="75%" fill ="url(#reflect)" >
<title > A reflecting linear gradient</title >
<desc > The gradient again starts dark, slowly shifting to light,
then quickly dark again. However, the next repeat shifts
quickly to the light, then slowly back dark.
The original pattern is then repeated, followed by the reflected
version again.
</desc >
</rect >
</svg >
<figcaption id ="fig1-caption"
> Figure 1: Repeating SVG gradients</figcaption >
</figure >
最後に、最後のバージョンでは、図に含まれている複雑な注釈をグラフィックに含めるために、graphics-documentを使用している。 グラフィックの2つのセクションはgraphics-object
<figure id ="fig1" role ="figure region" >
<svg role ="graphics-document" >
<title > Repeating versus reflecting linear gradients</title >
<desc >
The graphic shows two gradient patterns,
annotated with text labels and arrows.
Both gradients use the same series of color stops,
starting dark, slowly shifting to light,
then quickly dark again.
This cycle covers one-quarter of the width of the graphic,
starting on the left.
The two gradients differ in their repeat cycles.
</desc >
<defs >
</defs >
<g role ="graphics-object" aria-labelledby ="repeat-label" >
</g >
<g role ="graphics-object" aria-labelledby ="reflect-label" >
<desc >
The gradient stretches across the bottom half of
the graphic.
Each cycle of the gradient alternates direction,
left-to-right then right-to-left,
as do the arrows that emphasize the pattern.
</desc >
<rect y ="50%" width ="100%" height ="50%" fill ="url(#reflect)" />
</rect >
<use y ="70%" xlink:href ="#gradient-vector" >
<title > 1st cycle</title >
<desc > left-to-right arrow, starting from x="0"</desc >
</use >
<use y ="70%" x ="-50%" transform ="scale(-1,1)"
xlink:href ="#gradient-vector" >
<title > 2nd cycle, reflected</title >
<desc > right-to-left arrow, ending at x="25%"</desc >
</use >
<use y ="70%" x ="50%" xlink:href ="#gradient-vector" >
<title > 3rd cycle</title >
<desc > left-to-right arrow, starting from x="50%"</desc >
</use >
<use y ="70%" x ="-100%" transform ="scale(-1,1)"
xlink:href ="#gradient-vector" >
<title > 4th cycle, reflected</title >
<desc > right-to-left arrow, ending at x="75%"</desc >
</use >
<text id ="reflect-label" class ="overlay-text"
aria-label ="spreadMethod='reflect'"
dy ="-0.2em" dx ="-0.2em" x ="100%" y ="100%"
> reflect</text >
</g >
</svg >
<figcaption > Figure 1: spreadMethod options for
repeating SVG gradients</figcaption >
</figure >
HTML 5 canvasゲーム用に動的に構築されたフォールバックDOM 内では、要素は、複合グラフィックを作成するさまざまな画像を表わしてもよい：
<canvas role ="graphics-document" >
<p id ="scene-desc" role ="img"
aria-label ="The Dungeon"
aria-describedby ="scene-desc" >
The door opens into a long hallway.
Every few steps on either side are barred doors.
Moisture drips from the stone walls.
</p >
<p id ="grue-1" role ="img"
aria-label ="Grue"
aria-describedby ="grue-1" >
An amorphous and poorly defined, but unmistakably sinister,
creature blocks the passage.
</p >
</canvas >
5. ステートおよびプロパティWAI-ARIA は、さまざまなOSプラットフォーム上のプラットフォームの<a3>アクセシビリティAPIをサポートするために使用されるステートおよびプロパティ一式を提供する。支援技術は、公開されたユーザーエージェントのDOM を通して、またはプラットフォームのアクセシビリティAPI へのマッピングを通して、この情報にアクセスしてもよい。ロールと組み合わせる場合、ユーザーエージェントは、いつでもユーザーに伝えるためのユーザーインターフェイス情報を支援技術に提供することができる。ステートまたはプロパティの変化は、支援技術に通知をもたらす。これは、変更が発生したことをユーザーに通知するかもしれない。
A. 変更ログThe full commit history to WAI-ARIA Graphics Module 1.0 is available.
2017-11-15: Change superclass for graphics-object to img and graphics-symbol to group.
2016-01-26: changed superclass of graphics-doc to structure.
2016-04-28: removed reference to role="none" or "presentation".
2016-05-02: Change graphics-doc to graphics-document.
2016-05-07: clarify limitations of presentational role; mention SVG 2 next to HTML 5 in section on Schemata.
↑