WAI-ARIA 图形模块

摘要

辅助技术需要关于文档结构和预期行为的语义信息，以便向残障人士传达适当信息。本规范定义了一个 WAI-ARIA 1.1 [WAI-ARIA-1.1] 模块，其中包含特定于 Web 图形的核心角色。这些语义允许作者向辅助技术表达图形的逻辑结构，以改善图形的无障碍性。辅助技术随后可以启用语义导航，并适配样式和交互功能，从而为受众提供最佳体验。这些特性补充了 HTML [HTML52] 和 SVG [SVG2] 定义的图形和文档结构元素。

本文档是 WAI-ARIA 套件的一部分，该套件在 WAI-ARIA 概述中描述。

4. 图形角色

本节定义对 WAI-ARIA 角色分类体系的补充，并描述所有角色的特征和属性。有关本模块所提供字段的描述，请参见 ARIA 角色。

作者可以通过使用角色和属性，影响呈现给辅助技术的内容，并影响导航。这包括将元素标记为没有语义重要性的能力。对于图形，有许多情况中，呈现并导航每个元素会使图形更难理解和使用。

作者可以通过分配角色 none 或 presentation，将元素标记为从文档的语义表示（无障碍树）中排除。具有此角色的元素应被辅助技术透明地处理，就好像其子项或文本内容直接包含在其父元素中一样。此外，某些角色，例如 img 或 graphics-symbol，在分配给父元素时，会导致所有子 DOM 结构从无障碍树中省略。这由角色特征表中的“Children Presentational” 值指示。最后，图形语言的原生语义也可能默认忽略没有附加语义数据的 DOM 结构；对于 SVG，这在 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 通过其视觉（通常是二维）表示的语义重要性来区分。用户代理和辅助技术 SHOULD 在支持图形导航时考虑这一点。对文档重新格式化或重新样式化的无障碍技术 SHOULD NOT 更改 graphics-document 的布局，除非更改方式与其内容的语义角色和关系一致。
相对于 img，graphics-document 通过其内容的结构化性质来区分。其子元素可以具有语义含义，并且可以包含链接或其他交互式部件。
相对于 graphics-object， graphics-document 是自包含的。当从周围内容中分离出来时，其含义仍然保留。具有 graphics-document 角色的元素定义了解释子内容的范围和上下文。

一般来说，作者 SHOULD 将 graphics-document 角色用于结构化图形，例如图表、地图、图示、技术图纸、蓝图和说明性图形。但是，如果单个大型图形具有离散区域，且这些区域可以在不牺牲含义的情况下安全地重新排列，则每个这样的区域 SHOULD 是一个不同的 graphics-document。可以使用替代角色（例如 figure）将它们分组在一起。一个 graphics-document 也可以嵌套在另一个内部，例如嵌入在地图中的条形图或图表面板矩阵应具有 graphics-document 角色。嵌套文档提供封装；内部和外部图形的组件之间的导航应是显式的。

注

为了支持基于 ARIA 1.0 规范的用户代理和辅助技术，作者可能希望包含 document 角色作为后备值，形式为 role="graphics-document document"。

未来规范可能会为具有特殊语义结构的特定类型图形文档定义更具体的角色。这些更具体的角色将是 graphics-document 的子类。

示例 1

电路的 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">
        /* omitted */
     </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"/>
     <!-- the switch, more wires, and a light bulb --> 
</svg>

特征：
特征	值
超类角色：	`document`
相关概念：	`graphics-object` `img` `article`
继承的状态和属性：	`aria-atomic` `aria-busy (state)` `aria-controls` `aria-current (state)` `aria-describedby` `aria-details` `aria-disabled (state)` `aria-dropeffect` `aria-errormessage` `aria-expanded (state)` `aria-flowto` `aria-grabbed (state)` `aria-haspopup` `aria-hidden (state)` `aria-invalid (state)` `aria-keyshortcuts` `aria-label` `aria-labelledby` `aria-live` `aria-owns` `aria-relevant` `aria-roledescription`
名称来源：	作者
要求无障碍名称：	True
子项呈现性：	False

`graphics-object` （角色）

graphics-document 的一个区段，表示具有语义含义的不同对象或子组件。图形对象本身也可以具有嵌套的子组件。

表示一组彼此断开的对象的容器元素应改为赋予 group 或 list 角色。没有语义含义且不改变祖先提供的语义上下文的分组元素（例如仅用于样式或布局的 div 或 SVG g） SHOULD NOT 被赋予角色。可以使用角色 none 或 presentation 显式指示缺少角色。

与 graphics-document 不同， graphics-object 不必是自包含的，且它不会为导航建立新的上下文。但是，用户代理和辅助技术 SHOULD 为用户，特别是非视觉用户，提供一种以层级方式导航对象嵌套结构的方式，类似于嵌套列表。

注

为了支持基于 ARIA 1.0 规范的用户代理和辅助技术，作者可能希望包含 group 角色作为后备值，形式为 role="graphics-object group"。

示例 2

以下代码是结构化图形标记的一部分。它包含具有各种角色的 SVG g 分组元素：

graphics-object 用于不同对象，例如房屋、其门或屋顶。
group 用于将窗户或树木（多个不同对象）分组在一起，并带有单个标签或描述。
img 用于作为整体描述的背景。
none 用于应用样式或变换但没有任何语义含义的元素。

当图形对象具有多个子组件时， group 角色会作为显式后备提供。

<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>
        <!-- The multiple parts of the background form a single image
             conveyed by that one description. -->
        <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>
        <!-- The house has a number of details worth calling out,
             so it is a graphical object -->

        <rect fill="firebrick" stroke="darkRed"
              width="300" height="200" y="-200"
              role="none" /><!-- the walls of the house are 
                already described thoroughly,
                so no role is required -->

        <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>
            <!-- The graphical object role allows for further
                 nested sub-components.
                 However, based on the default SVG API mappings,
                 these shapes, which have neither labels nor descriptions,
                 will be treated as presentation. -->
            <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">
            <!-- The windows are distinct objects, 
                 grouped together with a common label -->
            <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)">
                <!-- more windows on the second floor -->
            </g>
        </g>
        <!-- more markup for the roof and chimney -->

        <text id="house-label"
              font-family="cursive" font-size="36px" 
              x="70" y="50">My House</text>
    </g>
    <!-- more markup for the trees -->
</svg>

特征：
特征	值
超类角色：	`group`
相关概念：	`graphics-document` `group` `img` `graphics-symbol`
继承的状态和属性：	`aria-activedescendant` `aria-atomic` `aria-busy (state)` `aria-controls` `aria-current (state)` `aria-describedby` `aria-details` `aria-disabled (state)` `aria-dropeffect` `aria-errormessage` `aria-expanded (state)` `aria-flowto` `aria-grabbed (state)` `aria-haspopup` `aria-hidden (state)` `aria-invalid (state)` `aria-keyshortcuts` `aria-label` `aria-labelledby` `aria-live` `aria-owns` `aria-relevant` `aria-roledescription`
名称来源：	作者内容
要求无障碍名称：	False
子项呈现性：	False

`graphics-symbol` （角色）

用于传达简单含义或类别的图形对象，其中含义比特定视觉外观更重要。它可以是较大结构化图形（例如图表或地图）的组成部分。该符号本身是一个原子对象；子项是呈现性的。

当作为结构化符号语言的一部分使用时， aria-roledescription 属性（在 ARIA 1.1 [WAI-ARIA-1.1] 中引入）可用于单独命名符号类型，区别于该符号特定实例的名称和描述。

注

为了支持基于 ARIA 1.0 规范的用户代理和辅助技术，作者可能希望包含 img 角色作为后备值，形式为 role="graphics-symbol img"，如果这还不是该元素的默认语义角色。

示例 3

在餐厅菜单的 HTML 文档中， img 元素可以表示一个重复出现的符号：

<h2>Appetizers</h2>
<ul>
    <li> Spinach Salad with Strawberry & Almonds
        <img role="graphics-symbol" title="Vegetarian" src="../assets/leaf.svg" />
        <img role="graphics-symbol" title="Contains Nuts" src="../assets/peanut.svg" />
    </li>
    <li> Chicken Satay with Peanut Sauce
        <img role="graphics-symbol" title="Contains Nuts" src="../assets/peanut.svg" />
    </li>
    <!-- … -->
</ul>

示例 4

在电路的 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>
    <circle r="10" />
    <path d="M0,-10 C0,8 5,8 5,0 C5,-8 0,-8 0,10" />
</g>

请注意，在这个示例中，可见文本必须包含在其父符号的标签中。作为 graphics-symbol 的子项，它被视为呈现性内容，因而不能作为图形中的单独元素被访问。

示例 5

在建筑蓝图风格的 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`
相关概念：	符号
继承的状态和属性：	`aria-atomic` `aria-busy (state)` `aria-controls` `aria-current (state)` `aria-describedby` `aria-details` `aria-disabled (state)` `aria-dropeffect` `aria-errormessage` `aria-expanded (state)` `aria-flowto` `aria-grabbed (state)` `aria-haspopup` `aria-hidden (state)` `aria-invalid (state)` `aria-keyshortcuts` `aria-label` `aria-labelledby` `aria-live` `aria-owns` `aria-relevant` `aria-roledescription`
名称来源：	作者
要求无障碍名称：	True
子项呈现性：	True

4.2 图形的其他角色

以下在 ARIA 1.1 [WAI-ARIA-1.1] 中定义的核心 ARIA 角色，也与注释图形相关：

img （图像）定义一个被感知为不可分割整体的单一图形。与 graphics-document 不同，图像不能具有可导航或交互式子内容。与 graphics-symbol 不同，图像可能需要详细的文本描述，以向非视觉用户完整传达其含义。
figure 定义一个容器元素，用于包含作为所在文档关键部分但位于正常阅读流之外的内容（包括图形）。 figure 通常会包含一个或多个具有 img 或 graphics-document 角色的元素，但也可以包含文本标题、署名或其他相关内容。

以下示例演示了在文档中适当地使用 img、figure 和 graphics-document。

示例 6

在 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，可以从段落文本流中单独重新定位。

<figure id="fig1" role="figure region">
    <svg id="fig1A" class="nested-figure" role="figure"
         aria-labelledby="fig1-caption, fig1A-caption">
        <!-- markup omitted-->
    </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 在图形上包含复杂注释，该图形仍包含在 figure 元素中。该图形的两个区段是 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>
            <!-- markup omitted -->
        </defs>
        <g role="graphics-object" aria-labelledby="repeat-label">
            <!-- markup omitted -->
        </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>

示例 7

在为 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>
   <!-- more DOM elements representing game controls -->
</canvas>

WAI-ARIA 图形模块

W3C 推荐标准 2018年10月02日

摘要

本文档状态

1. 引言

1.1 目标受众

1.2 用户代理支持

1.3 WAI-ARIA 与宿主语言的共同演进

1.4 创作实践

1.4.1 创作工具

1.4.2 测试实践和工具

1.5 辅助技术

2. 一致性

3. 重要术语

4. 图形角色

4.1 角色定义

`graphics-document` （角色）

`graphics-object` （角色）

`graphics-symbol` （角色）

4.2 图形的其他角色

5. 状态和属性

A. 变更日志

A.1 自上一份公开工作草案以来的实质性变更

A.2 自第一份公开工作草案以来的其他实质性变更

B. 致谢

B.1 发布时活跃于 SVG 无障碍任务组的参与者

B.2 发布时活跃于 ARIA WG 的参与者

B.3 资助方

C. 参考文献

C.1 规范性参考文献

C.2 资料性参考文献

WAI-ARIA 图形 模块

W3C 推荐标准 2018年10月02日

摘要

本文档状态

1. 引言

1.1 目标受众

1.2 用户代理支持

1.3 WAI-ARIA 与宿主语言的共同演进

1.4 创作实践

1.4.1 创作工具

1.4.2 测试实践和 工具

1.5 辅助技术

2. 一致性

3. 重要术语

4. 图形角色

4.1 角色定义

graphics-document （角色）

graphics-object （角色）

graphics-symbol （角色）

4.2 图形的其他角色

5. 状态和属性

A. 变更日志

A.1 自上一份公开工作草案以来的实质性变更

A.2 自第一份公开工作草案以来的其他实质性变更

B. 致谢

B.1 发布时活跃于 SVG 无障碍任务组的参与者

B.2 发布时活跃于 ARIA WG 的参与者

B.3 资助方

C. 参考文献

C.1 规范性参考文献

C.2 资料性参考文献

WAI-ARIA 图形模块

1.4.2 测试实践和工具

`graphics-document` （角色）

`graphics-object` （角色）

`graphics-symbol` （角色）