그래픽 심볼(Symbol)

Previous그래픽 객체(Object)Next그외 다른 역할(Other Roles)

Last updated 6 years ago

그래픽 심볼(Symbol)

정의(Definition)

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

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

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

예제(Example)

예제 1

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

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

<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>

예제 3

건축 도면 스타일의 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">

    <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)

특성

값

상위 클래스 역할