by 야무(yamoo9)

그래픽 문서(Document)

정의(Definition)

document 유형은 콘텐츠의 비주얼 또는 레이아웃에 의미를 부여합니다.

다른 문서 유형과 유사하게 그래픽 문서 역할은 사용자의 기본 상호 작용 모드가 문서를 검색하는 것이 아니라 애플리케이션을 제어 할 것으로 예상 되며, 관련 정보를 포함하는 페이지 영역의 루트 요소에 적용됩니다. 이 역할 요소는 문서 파일의 루트 요소, 또는 그 안에 중첩 된 구조일 수 있습니다.

graphics-document는 다음과 같은 유사한 역할과 구별될 수 있습니다.

  • 다른 문서와 달리, graphics-document는 시각적 (보통 2차원) 표현의 의미적 중요성으로 구별됩니다. 사용자 에이전트와 보조 기술은 그래픽 탐색을 지원할 때 이 점을 고려해야 합니다. 문서의 서식을 다시 지정하거나 스타일을 변경하는 접근성 기술은 콘텐츠의 의미적인 역할, 관계와 일치하는 방식을 제외하고 graphics-document의 레이아웃을 변경 해서는 안됩니다.

  • img와 관련하여 graphics-document는 콘텐츠의 구조화 된 특성으로 구별됩니다. 자식 요소는 의미를 가질 수 있으며 링크 또는 기타 인터랙티브 위젯을 포함 할 수 있습니다.

  • graphics-object와 관련하여 graphics-document는 자체 포함되어 있습니다. 주변 콘텐츠와 분리되면 그 의미가 지속됩니다. graphics-document 역할이 설정된 요소는 하위 내용의 해석을 위한 범위(scope)와 컨텍스트를 정의합니다.

일반적으로 제작자는 차트, 지도, 다이어그램, 기술 도면, 청사진 및 교육용 그래픽과 같은 구조화 된 그래픽에 graphics-document 역할을 사용해야 합니다. 단, 의미를 변질시키지 않고 재배열 할 수 있는 개별 영역이 있는 1개의 큰 그래픽일 경우 각 영역은 고유한 graphic-document로 구성되어야 합니다.

그리고 다른 역할(예: figure 등)과 함께 그룹화하는데 사용할 수 있습니다. graphics-document는 다른 차트 안에 중첩될 수 있습니다. 예를 들면 지도에 포함된 막대형 차트 또는 차트 패널 행렬(matrix)은 graphics-document의 역할을 가져야 합니다. 중첩된 문서는 캡슐화(encapsulation)를 제공합니다. 내부 그래픽과 외부 그래픽 컴포넌트 간 탐색은 명시적 이어야 합니다.

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

다음 버전의 사양에서는 특수한 의미 구조를 가지는 특정 형태의 그래픽 문서에 대해 보다 구체적인 역할을 정의 할 수 있습니다. 더 구체적인 역할은 graphics-document의 하위 클래스가 될 것입니다.

예제(Example)

전기 회로를 그린 SVG 다이어그램은 간단한 그래픽 문서입니다.

<svg xmlns="https://www.w3.org/2000/svg" 
     width="400" height="200" viewBox="0 0 200 100"
     role="graphics-document document">

     <title>간단한 회로(simple circuit)</title>
     <desc>1개 소스, 1개 스위치 및 1개 부하를 갖는 회로</desc>

     <style type="text/css">
        /* 생략 */
     </style>

     <g id="battery-1" role="graphics-symbol img"
        aria-roledescription="source" aria-label="배터리(battery)"
        transform="translate(20,50)">
        <path d="M-15,-5 h30 M-5,5 h10"/>
     </g>

     <path id="wire-1" role="graphics-symbol img"
          aria-label="와이어 연결(wire connecting)"
          aria-labelledby="wire-1 battery-1 switch-1"
          class="wire" d="M20,45 V20 H90"/>

     <!-- 스위치, 더 많은 전선 및 전구를 나타내는 그래픽 코드 -->

</svg>

특징(Characteristics)

Previous역할Next그래픽 객체(Object)

Last updated