그외 다른 역할(Other Roles)

정의(Definition)

ARIA 1.1 [WAI-ARIA-1.1]에 정의된 다음 핵심 ARIA 역할은 그래픽에 주석을 다는 것과 관련이 있습니다.

• img는 분할 할 수 없는 전체로 인식되는 하나의 그래픽을 정의합니다. graphics-document와 달리 이미지는 탐색(내비게이션) 할 수 있거나 인터랙티브 한 하위 콘텐츠를 포함 할 수 없습니다. 그리고 graphics-symbol과 달리 이미지는 시각에 장애가 있는 사용자에게 그 의미를 온전히 전달하기 위해 상세한 텍스트 설명이 필요할 수 있습니다.

• figure는 콘텐츠(그래픽 포함)를 포함하는 컨테이너 요소를 정의할 때 사용합니다. figure는 종종 img또는 graphics-document 역할을 가진 하나 이상의 요소를 포함하지만 텍스트 캡션, 크레딧(credits) 또는 기타 관련 내용을 포함 할 수도 있습니다.

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

예제(Example)

예제 1

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

<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로 구성됩니다.

<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이며 주석은 개별 레이블과 설명을 가지고 있습니다.

<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 안의 각 요소들은 혼합(합성)된 그래픽을 만드는 여러 이미지를 나타낼 수 있습니다.

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