# 그래픽 심볼(Symbol)

### 정의(Definition)

중요한 의미가 부여된 그래픽보다 단순한 의미 또는 범주(카테고리)를 전달하는데 사용 되는 그래픽 객체입니다. 차트나 지도와 같이 더 큰 구조의 그래픽 컴포넌트일 수 있습니다. 심볼 자체는 매우 작은(atomic) 객체입니다. 자식 요소는 프레젠테이션으로 처리되어 접근성 트리에서 무시됩니다.

구조화 된 심볼(symbolic) 언어의 일부로 사용된 경우 `aria-roledescription` 속성(ARIA 1.1 \[[WAI-ARIA-1.1](https://www.w3.org/TR/graphics-aria-1.0/#bib-WAI-ARIA-1.1)])을 사용하여 심볼의 특정 인스턴스에 대한 이름 또는 설명과 별도로 심볼 유형의 이름을 설정할 수 있습니다.

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

### 예제(Example)

**예제 1**

레스토랑 메뉴에 반복 사용 되는 심볼(기호)을 HTML 문서에서 `img` 요소에 `role="graphics-symbols"` 속성을 설정해 구성할 수 있습니다.

```markup
<h2>에피타이저(Appetizers)</h2>
<ul>
    <li>시금치 샐러드와 딸기 &amp; 아몬드
        <img role="graphics-symbol" title="채식주의자" src="../assets/leaf.svg">
        <img role="graphics-symbol" title="견과류 포함" src="../assets/peanut.svg">
    </li>
    <li>치킨 사테(Chicken Satay)와 땅콩 소스
        <img role="graphics-symbol" title="견과류 포함" src="../assets/peanut.svg">
    </li>
    ...
</ul>
```

**예제 2**

전기 회로 SVG 다이어그램 내에 그려진 전구, 배터리, 스위치, 로드를 나타내는 그래픽은 각각 개별적인 심볼(기호)입니다.

![](https://camo.githubusercontent.com/1f539dc04acf5949feb1756fc81cdb445d87d3d0/68747470733a2f2f7261776769742e636f6d2f79616d6f6f392f67726170686963732d617269612f6d61737465722f6173736574732f636972637569742d6469616772616d2e737667)

```markup
<g id="lightbulb-1" 
   role="graphics-symbol img"
   aria-roledescription="load"
   aria-label="백열 전구"
   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**](https://www.w3.org/TR/graphics-aria-1.0/#graphics-symbol)**)의 하위 요소 인 경우 프리젠테이션 콘텐츠로 취급** 되므로 그래픽의 개별 요소로 접근 할 수 없습니다.

**예제 3**

건축 도면 스타일의 SVG 다이어그램은 SVG `symbol` 요소를 재사용 하기 위해 SVG `use` 요소를 사용한 그래픽 심볼(graphics-symbol)로 구성됩니다.

![](https://camo.githubusercontent.com/813e41c9985bc3532bf3a463e1033f99b906b6ae/68747470733a2f2f7261776769742e636f6d2f79616d6f6f392f67726170686963732d617269612f6d61737465722f6173736574732f626c75657072696e742e737667)

```markup
<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">

    <title>5개의 콘센트가 있는 방</title>
    <desc>문이 1개인 중간 크기 방의 전기 콘센트 위치와 개수를 보여주는 회로도 입니다.</desc>

    <defs> 
        <symbol id="outlet" viewBox="0 0 30 20"
                stroke="#000" stroke-width="1.5" pointer-events="all">
          <desc>전기 콘센트 심볼(기호)는 플러그 모양이 위에 겹쳐있는 원입니다. 플러그는 수직선에서 뻗어 나온 두 개의 수평선으로 구성됩니다.</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>전기 콘센트</title>
            <desc>북서쪽 벽에 위치</desc>
        </use>
        <use xlink:href="#outlet" role="graphics-symbol img"
             x="250" y="15" width="45" height="30">
            <title>전기 콘센트</title>
            <desc>북동쪽 벽에 위치</desc>
        </use>
        ...
    </g>
    
</svg>
```

### **특징(Characteristics)**

| 특성                                 | 값                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 상위 클래스 역할                          | [`img`](https://www.w3.org/TR/wai-aria-1.1/#img)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| 관련 개념                              | [`symbol`](https://en.wikipedia.org/wiki/Symbol)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| 상속된 상태, 속성                         | <p><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></p> |
| 이름                                 | author                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| 접근 가능한 이름 필요                       | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| 자식 요소 표현화(Children Presentational) | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |


---

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