# 그래픽 객체(Object)

### 정의(Definition)

[graphics-document](https://github.com/yamoo9/graphics-aria/wiki/%EA%B7%B8%EB%9E%98%ED%94%BD-%EB%AC%B8%EC%84%9C-\(graphics-document\)-%EC%97%AD%ED%95%A0) 섹션의 개별 객체 또는 하위 컴포넌트(구성요소)에 의미를 부여합니다. 그래픽 객체는 중첩된 하위 컴포넌트를 가질 수 있습니다.

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

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

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

### **예제(Example)**

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

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

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

![My House SVG](https://camo.githubusercontent.com/3f25bb6e3baad7245709f73314db6a6a2dfbcd27/68747470733a2f2f7261776769742e636f6d2f79616d6f6f392f67726170686963732d617269612f6d61737465722f6173736574732f686f7573652d6772617068696373726f6c65732e737667)

```markup
<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`](https://www.w3.org/TR/wai-aria-1.1/#group)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| 관련 개념                              | <p><a href="https://github.com/yamoo9/graphics-aria/wiki/%EA%B7%B8%EB%9E%98%ED%94%BD-%EA%B0%9D%EC%B2%B4(Graphic-Object)-%EC%97%AD%ED%95%A0#graphics-document"><code>graphics-document</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#group"><code>group</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#img"><code>img</code></a><br><a href="https://github.com/yamoo9/graphics-aria/wiki/%EA%B7%B8%EB%9E%98%ED%94%BD-%EA%B0%9D%EC%B2%B4(Graphic-Object)-%EC%97%AD%ED%95%A0#graphics-symbol"><code>graphics-symbol</code></a><br></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| 상속된 상태, 속성                         | <p><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-activedescendant"><code>aria-activedescendant</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic"><code>aria-atomic</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy"><code>aria-busy (state)</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-controls"><code>aria-controls</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-current"><code>aria-current (state)</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled"><code>aria-disabled (state)</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-dropeffect"><code>aria-dropeffect</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage"><code>aria-errormessage</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded"><code>aria-expanded (state)</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-flowto"><code>aria-flowto</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-grabbed"><code>aria-grabbed (state)</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup"><code>aria-haspopup</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden"><code>aria-hidden (state)</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-invalid"><code>aria-invalid (state)</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts"><code>aria-keyshortcuts</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label"><code>aria-label</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby"><code>aria-labelledby</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live"><code>aria-live</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-owns"><code>aria-owns</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant"><code>aria-relevant</code></a><br><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription"><code>aria-roledescription</code></a><br></p> |
| 이름                                 | <p>author<br>contents</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| 접근 가능한 이름 필요                       | false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| 자식 요소 표현화(Children Presentational) | false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/graphics-module-1.0/roles/graphics-object.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
