# 그외 다른 역할(Other Roles)

### 정의(Definition)

ARIA 1.1 \[[WAI-ARIA-1.1](https://www.w3.org/TR/graphics-aria-1.0/#bib-WAI-ARIA-1.1)]에 정의된 다음 핵심 ARIA 역할은 그래픽에 주석을 다는 것과 관련이 있습니다.

* [`img`](https://www.w3.org/TR/wai-aria-1.1/#img)는 분할 할 수 없는 전체로 인식되는 하나의 그래픽을 정의합니다. [`graphics-document`](https://www.w3.org/TR/graphics-aria-1.0/#graphics-document)와 달리 이미지는 탐색(내비게이션) 할 수 있거나 인터랙티브 한 하위 콘텐츠를 포함 할 수 없습니다. 그리고 [`graphics-symbol`](https://www.w3.org/TR/graphics-aria-1.0/#graphics-symbol)과 달리 이미지는 시각에 장애가 있는 사용자에게 그 의미를 온전히 전달하기 위해 상세한 텍스트 설명이 필요할 수 있습니다.
* [`figure`](https://www.w3.org/TR/wai-aria-1.1/#figure)는 콘텐츠(그래픽 포함)를 포함하는 컨테이너 요소를 정의할 때 사용합니다. `figure`는 종종 `img`또는 `graphics-document` 역할을 가진 하나 이상의 요소를 포함하지만 텍스트 캡션, 크레딧(credits) 또는 기타 관련 내용을 포함 할 수도 있습니다.

다음 예제는 `img`, `figure`, `graphics-document`의 적절한 사용 방법을 보여줍니다.

### 예제(Example)

#### 예제 1

HTML5 문서에서 인라인 SVG는 때때로 매우 작은(atomic) 이미지를 나타낼 수 있습니다. 그래픽이 텍스트 흐름의 일부인 경우 첫 번째 예와 같이 이 역할로 충분합니다

![](/files/-LEIkCKUcnQC2qWBEKQ6)

```markup
<p>
  반복되는 SVG 그래디언트는 <code>spreadMethod</code> 속성을 사용하여 정의됩니다.
  <code>repeat</code> 값은 컬러 스톱(color stops) 위치가 처음부터 끝까지 같은 순서로 반복되도록 합니다.
</p>

<svg class="inline-example" role="img">
    <title>반복되는 선형 그레디언트</title>
    <desc>
      그레디언트가 검정색에서 시작해서 서서히 밝게 변한 다음 다시 빠르게 어두워집니다. 
      이 패턴은 왼쪽에서 오른쪽으로 4번 반복됩니다. 매번 큰 영역에 걸쳐 밝게 빛난 다음 
      짧은 공간에서 어두워집니다.
    </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`로 구성됩니다.

![](/files/-LEIkJOBCDKd0r4HpOgg)

```markup
<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>반사(reflect) 선형 그레디언트</title>
            <desc>
              그레디언트가 검정색에서 시작해서 서서히 밝게 변한 다음 다시 빠르게 어두워집니다.
              그러나 다음 반복은 빠르게 밝게 바뀐 다음 천천히 어두워집니다. 이와 같은 패턴이 
              반복되고 반사된 버전이 다시 그려집니다.
            </desc>
        </rect>
    </svg>
    <figcaption id="fig1-caption">그림 1: SVG 그레디언트 반복(Repeat)</figcaption>
</figure>
```

마지막으로 다음 예시는 `graphics-document`를 사용하여 `figure` 요소에 복잡한 주석(annotations)을 그래픽에 포함 시킵니다. 그래픽의 2개 섹션은 [`graphics-object`](https://www.w3.org/TR/graphics-aria-1.0/#graphics-object)이며 주석은 개별 레이블과 설명을 가지고 있습니다.

![](/files/-LEIkSc8iMT5t3dSwDwB)

```markup
<figure id="fig1" role="figure region">
    <svg role="graphics-document">
        <title>반복(Repeat) vs 반사(Reflect) 선형 그레디언트</title>
        <desc>
          그래픽은 텍스트 레이블과 화살표가 있는 2개의 그레디언트 패턴이 그려져 있습니다.
          2개 그레디언트 모두 검정색에서 시작해서 서서히 밝아진 다음 다시 빠르게 어두워지는 
          일련의 컬러 스톱을 사용합니다. 이러한 사이클(cycle)은 그래픽 너비를 4등분(1/4)하며, 
          왼쪽에서 오른쪽 방향으로 진행됩니다. 2개의 그레디언트는 반복되는 사이클이 각기 다릅니다.
        </desc>
        <defs>
          <!-- 마크업 생략 -->
        </defs>
        <g role="graphics-object" aria-labelledby="repeat-label">
          <!-- 마크업 생략 -->
        </g>            
        <g role="graphics-object" aria-labelledby="reflect-label">
            <desc>
              그레디언트는 그래픽의 아래쪽 절반에 걸쳐 펼쳐집니다. 
              그레디언트의 각 사이클은 반복되는 패턴 방향을 표시한 화살표 방향대로 
              왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 방향이 바뀝니다.
            </desc>
            <rect y="50%" width="100%" height="50%" fill="url(#reflect)" />
            </rect>
            <use y="70%" xlink:href="#gradient-vector" >
                <title>1번째 사이클</title>
                <desc>x="0" 위치에서 시작하는 왼쪽에서 오른쪽 방향의 화살표</desc>
            </use>
            <use y="70%" x="-50%" transform="scale(-1,1)"
                 xlink:href="#gradient-vector" >
                <title>2번째 사이클, 반사됨</title>
                <desc>x="25%" 위치에서 끝나는 오른쪽에서 왼쪽 방향의 화살표</desc>
            </use>
            <use y="70%" x="50%" xlink:href="#gradient-vector" >
                <title>3번째 사이클</title>
                <desc>x="0" 위치에서 시작하는 왼쪽에서 오른쪽 방향의 화살표</desc>
            </use>
            <use y="70%" x="-100%" transform="scale(-1,1)"
                 xlink:href="#gradient-vector" >
                <title>4번째 사이클, 반사됨</title>
                <desc>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>그림 1: 반복 SVG 그레디언트 spreadMethod 옵션</figcaption>
</figure>
```

#### 예제 2

HTML5 게임을 만들기 위해 캔버스(Canvas)를 사용할 경우, 동적으로 생성된 대체(fallback) DOM 안의 각 요소들은 혼합(합성)된 그래픽을 만드는 여러 이미지를 나타낼 수 있습니다.

```markup
<canvas role="graphics-document">

    <p id="scene-desc" role="img" 
       aria-label="던전(Dungeon)"
       aria-describedby="scene-desc">
       문이 긴 복도를 향해 열립니다. 어느 쪽이든 걸음마다 철창 문이 있습니다. 
       그리고 돌 벽에는 젖은 물방울이 떨어집니다.
    </p>
    <p id="grue-1" role="img"
       aria-label="전율(Grue)"
       aria-describedby="grue-1">
       불규칙한 모양으로 형태를 알기 어려운 뭔가 불길한 생물이 통로를 막고 있습니다.
   </p>
   <!-- 게임 컨트롤을 나타내는 보다 많은 DOM 요소 -->
   
</canvas>
```


---

# 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/untitled.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.