그래픽 객체(Object)

정의(Definition)

graphics-document 섹션의 개별 객체 또는 하위 컴포넌트(구성요소)에 의미를 부여합니다. 그래픽 객체는 중첩된 하위 컴포넌트를 가질 수 있습니다.

연결되지 않은 객체의 집합(collection)을 나타내는 컨테이너 요소에는 그룹(group) 또는 목록(list) 역할을 제공해야 합니다. 의미를 갖지 않고, 부모 요소에 의해 제공된 의미 컨텍스트를 변경하지 않는 그룹화 요소들에 none 또는 presentation 역할을 설정하면 안됩니다.

graphics-document와 달리 graphics-object는 자체 포함할 필요가 없으며 탐색을 위한 새로운 컨텍스트를 설정하지 않습니다. 그러나 유저 에이전트(UA)와 보조 기술(AT)은 사용자(특히 보는데 장애가 있는 사용자)가 중첩된 구조((계층 구조)를 탐색하는 방법을 제공해야 합니다.

NOTE. ARIA 1.0 사양을 기반으로 유저 에이전트(UA)와 보조 기술(AT)을 지원하기 위해 제작자는 group 역할을 대체하는(fallback) 값으로 role="graphics-object group"과 같이 속성 값을 적용할 수 있습니다.

예제(Example)

다음 코드는 구조화 된 그래픽 마크업일 일부분 입니다. 여기에는 다양한 역할을 가진 SVG g 그룹 요소가 포함 됩니다.

집(house), 문(door), 지붕(roof)을 나타내는 각 객체를 graphics-object로 설정합니다.
group 역할을 사용해 창문(windows), 트리(trees, 각 개별 개체)를 그룹화 하고, 레이블 또는 설명을 추가합니다.
배경 이미지의 경우, 별도의 기술이 필요 없으므로 img 역할을 부여해 접근성 트리에서 제외 시킵니다.
의미 없이 스타일 또는 트랜스폼을 적용하는 요소에는 none 역할을 설정합니다.

그래픽 객체에 여러 하위 컴포넌트가 있는 경우 그룹 역할을 명시적으로 설정하여 대체합니다.

<svg xmlns="https://www.w3.org/2000/svg"
     width="600" height="400" viewBox="0 0 600 400"
     role="graphics-document document">

    <title>집(Home: '고향' 같은 느낌의)</title>

    <!-- 1개 이상의 그래픽을 그룹으로 묶어 1개의 배경 이미지로 만든 후 설명을 추가합니다. -->
    <g role="img" aria-label="배경">
        <desc>파란 하늘과 햇빛, 푸른 초원</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>기본 도형으로 그려진 2층 벽돌집</desc>
        <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 -->

        <!--
            그래픽 객체 역할은 중첩된 하위 컴포넌트를 허용합니다. 
            그러나 기본 SVG API 매핑을 기반으로 레이블, 설명이 없는 도형은 
            프리젠테이션(접근성 트리에서 무시)으로 처리됩니다.
        -->
        <g role="graphics-object" aria-label="문"
           transform="translate(30,-90)">
            <desc>건물 왼쪽 갈색 문에는 창문과 둥근 모양의 문 손잡이가 있습니다.</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="창문"
           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>문 옆의 작은 창문</desc>
                </rect>
                <path aria-label="1층 거실 창문"
                      d="M180,0h100v60h-100v-60z
                         m30,0v60 m40,0v-60">
                    <desc>3개의 큰 창문으로 구성된 창은 1층 나머지 부분을 채웁니다.</desc>
                </path>
            </g>
            <g role="none" transform="translate(0,-180)">
                <!-- 2 층에 더 많은 창문이 있습니다. -->
                ...
            </g>
        </g>
        <!-- 지붕(roof)과 굴뚝(chimney)에 대해 마크업이 아래 추가 됩니다. -->
        ...

        <text id="house-label"
              font-family="cursive" font-size="36px" 
              x="70" y="50">나의 집</text>
    </g>
    <!-- 나무(trees)에 대한 마크업이 아래 추가 됩니다. -->
    ...
</svg>

특징(Characteristics)

특성

값

상위 클래스 역할

group