Graphics ARIA Guidebook
  • 사람을 위한 정보 그래픽 디자인
  • SVG 그래픽
    • SVG 디자인 도구
    • HTML 문서에 SVG 포함하기
    • SVG 레이아웃
    • SVG 기본 도형 그리기
    • SVG 패스 도형 그리기
    • SVG 컨테이너 요소
    • SVG 요소의 쌓이는 순서
    • SVG 하이퍼링크
    • SVG 텍스트
    • SVG 이미지
    • SVG 마스크
    • SVG 클립 패스
    • SVG 그레디언트
    • SVG 패턴
    • SVG 필터
    • SVG 접근성
    • SVG 아이콘 접근성
    • SVG 최적화
    • SVG 스프라이트
    • SVG 애니메이션
    • SVG 레퍼런스
  • 그래픽 접근성 모듈
    • 역할
      • 그래픽 문서(Document)
      • 그래픽 객체(Object)
      • 그래픽 심볼(Symbol)
      • 그외 다른 역할(Other Roles)
    • 상태와 속성
    • Graphics ARIA 실습 데모
Powered by GitBook
On this page
  • 표현 역할 (접근성 트리에서 제외)
  • 그래픽 역할
  1. 그래픽 접근성 모듈

역할

Previous그래픽 접근성 모듈Next그래픽 문서(Document)

Last updated 6 years ago

이 섹션은 WAI-ARIA 역할() 분류()에 대한 추가 사항을 정의 하고 모든 역할의 특징과 속성을 설명합니다. 이 모듈에서 제공하는 필드에 대한 설명은 을 참고하세요.

표현 역할 (접근성 트리에서 제외)

그래픽을 사용해 요소를 ​​표시하고 탐색하면 오히려 이해하고 사용하기가 더 어려워지는 경우가 많습니다. 이런 경우 , 역할 속성을 사용해 문서의 접근성 트리(Accessibility Tree)에서 제외 시킬 수 있습니다. 이 역할을 가진 요소는 자식 요소, 텍스트 콘텐츠 모두 보조 기술에서 읽지 않도록 처리합니다.

뿐만 아니라 , 역할 속성을 부모 요소에 설정하면, 모든 자식 요소를 DOM의 접근성 트리에서 제외시킬 수 있습니다.

HTML
<div role="none"> ... </div>

<div role="presentation"> ... </div>

<div role="img"> ... </div>

<div role="graphics-symbol"> ... </div>

이 속성 값은 자식 요소들 또한 표현(Children Presentational)으로 처리합니다. 마지막으로 SVG 같은 그래픽 언어 사용 시 의미있는 데이터를 포함하지 않은 경우 DOM 구조(접근성 트리)에서 기본적으로 무시됩니다. 이러한 경우 SVG 접근성 API의 매핑 사양인 []을 사용해 정의할 수 있습니다.

NOTE. 프레젠테이션으로 사용된 요소에 인터랙션이 설정되면 안되고, 접근성을 고려한 속성 또는 대체 텍스트를 할당하면 안됩니다. none 또는 presentation 역할이 부여된 요소는 인터랙티브 요소 또는 WAI-ARIA 상태, 속성을 가진 요소를 무시 처리하기 때문입니다.

그래픽 역할

아래는 이 명세서에 정의된 WAI-ARIA 역할의 알파벳순 목록입니다. 일반적으로 WAI-ARIA에 정의된 다른 역할과 결합하여 문서 및 리치 인터넷 애플리케이션(RIA) 내의 그래픽에 주석을 추가합니다. []

  • 그래픽 문서() 유형은 콘텐츠의 비주얼 또는 레이아웃에 의미를 부여합니다.

  • 그래픽 객체() 섹션의 개별 객체 또는 하위 컴포넌트(구성요소)에 의미를 부여합니다. 그래픽 객체는 중첩된 하위 컴포넌트를 가질 수 있습니다.

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

role
taxonomy
ARIA 역할
none
presentation
img
graphics-symbol
SVG-AAM-1.0
WAI-ARIA-1.1
graphics-document
document
graphics-object
graphics-document
graphics-symbol