canvas 콘텐츠에 접근성 구현

Applies to Windows and Windows Phone

HTML5에는 접근성에 canvas 콘텐츠를 표시하는 방법이 포함되어 있지 않으므로 CANVAS 요소는 액세스 가능한 앱에서 꼭 필요한 경우에만 사용해야 합니다. CANVAS를 사용해야 하는 경우에는 ARIA 특성을 사용하여 canvas의 특징, 동작 및 속성을 설명하는 것이 좋습니다. 가장 간단한 경우는 CANVAS 요소가 단일 ARIA 역할과 직접적으로 일치하는 것입니다.


<!-- Canvas exposed as an image element. -->
<canvas id="example" width="260" height="200" role="img" >Circles</canvas>

<!-- Canvas exposed as a button element -->
<canvas id="roundButton" width="50" height="50"
    tabindex="0" role="button" aria-label="Round"
    onmousedown="..." onmouseup="..." onclick="..." onkeydown="..." onkeyup="...">
</canvas>


일반적으로 CANVAS 요소는 동적이며 앱 시나리오가 접근성을 가지려면 추가 작업이 필요합니다. 특히 동적으로 canvas 콘텐츠에 연결되고 동기화 상태를 유지하는 병렬 DOM(문서 개체 모델) 표시를 구현해야 합니다.

다음 예제에서는 ARIA grid 역할이 체스판을 그리는 대체 canvas 표시를 제공합니다. 그리드의 요소는 canvas 콘텐츠가 변경될 때마다 JavaScript에서 유지 관리되어야 합니다.



<!-- A canvas that draws a chessboard has an alternate grid representation. -->
<canvas id="chessBoardCanvas" width="300" height="300" role="grid" 
      tabindex="0" aria-label="Chess board" aria-activedescendant="a8">
    <div id="r8" role="row" aria-label="Row 8">
        <div id="a8" role="gridcell" aria-label="a8">
            <div role="img">black rook</div>
        </div>
        <div id="b8" role="gridcell" aria-label="b8">
            <div role="img">black knight</div>
        </div>
        ...
    </div>
    <div id="r7" role="row" aria-label="Row 7">
        <div id="a7" role="gridcell" aria-label="a7">
            <div role="img">black pawn</div>
        </div>
        ...
    </div>
    <div id="r6" role="row" aria-label="Row 6">
        <div id="a6" role="gridcell" aria-label="a6"></div>
        <div id="b6" role="gridcell" aria-label="b6"></div>
        ...
    </div>
</canvas>

앱을 설계할 때 여기서 설명한 접근성 솔루션에 약간의 제한이 있다는 것에 유의하세요. 올바른 UI 트리 구조는 보장하지만 병렬 DOM(문서 개체 모델) 표시가 모든 시나리오에서 접근성이 있는 것은 아닙니다. 예를 들어, 마우스로 canvas를 가리키거나 터치할 경우 컨테이너 DIV 요소만 반환되고 canvas 콘텐츠를 나타내는 하위 요소는 반환되지 않습니다.

참고  XAML Canvas 요소는 절대 위치가 있는 Panel일 뿐입니다. 따라서 HTML Canvas에서는 여기에 설명된 문제가 발생하지 않습니다. 그 하위 항목은 항목으로서 읽을 수 있으며 앱 논리 구조에 적합하다면 Microsoft UI 자동화 보기에 나타납니다. Canvas 자체는 레이아웃 전용 시각적 요소이며 앱 구조 정보를 전달하지 않으므로 일반적으로 UI 자동화 보기에서는 표시되지 않습니다.

관련 항목

특정 콘텐츠 형식에 대한 접근성 구현

 

 

표시:
© 2015 Microsoft