그래픽 심볼(Symbol)
정의(Definition)
중요한 의미가 부여된 그래픽보다 단순한 의미 또는 범주(카테고리)를 전달하는데 사용 되는 그래픽 객체입니다. 차트나 지도와 같이 더 큰 구조의 그래픽 컴포넌트일 수 있습니다. 심볼 자체는 매우 작은(atomic) 객체입니다. 자식 요소는 프레젠테이션으로 처리되어 접근성 트리에서 무시됩니다.
구조화 된 심볼(symbolic) 언어의 일부로 사용된 경우 aria-roledescription
속성(ARIA 1.1 [WAI-ARIA-1.1])을 사용하여 심볼의 특정 인스턴스에 대한 이름 또는 설명과 별도로 심볼 유형의 이름을 설정할 수 있습니다.
예제(Example)
예제 1
레스토랑 메뉴에 반복 사용 되는 심볼(기호)을 HTML 문서에서 img
요소에 role="graphics-symbols"
속성을 설정해 구성할 수 있습니다.
<h2>에피타이저(Appetizers)</h2>
<ul>
<li>시금치 샐러드와 딸기 & 아몬드
<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>
이 예제에서 표시되는 텍스트가 상위 심볼의 레이블에 포함되어야 합니다. 그래픽 심볼(graphics-symbol)의 하위 요소 인 경우 프리젠테이션 콘텐츠로 취급 되므로 그래픽의 개별 요소로 접근 할 수 없습니다.
예제 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)
특성
값
상위 클래스 역할
관련 개념
상속된 상태, 속성
aria-atomic
aria-busy (state)
aria-controls
aria-current (state)
aria-describedby
aria-details
aria-disabled (state)
aria-dropeffect
aria-errormessage
aria-expanded (state)
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-roledescription
이름
author
접근 가능한 이름 필요
true
자식 요소 표현화(Children Presentational)
true
Last updated