도구 설명에 접근성 구현

이 항목에서는 JavaScript를 사용하는 Windows 스토어 앱 또는 C++, C# 또는 Visual Basic을 사용하는 Windows 스토어 앱에서 도구 설명에 접근성을 구현하는 데 필요한 마크업 및 코드에 대해 설명합니다.

표준 HTML 도구 설명

표준 HTML 도구 설명은 요소에 title 특성을 설정하여 만듭니다. 시스템에서는 표준 HTML 도구 설명을 접근성 있는 이름과 접근성 있는 설명으로 함께 사용합니다. title 특성을 사용하여 도구 설명을 만들고자 할 때 접근성 있는 이름으로 사용하지는 않으려면 aria-labelledby 또는 aria-label 특성을 사용합니다. 이러한 특성은 시스템에서 접근성 있는 이름을 검색할 때 title 특성에 우선합니다.


<!-- Narrator reads: "Inner text" -->
<button>Inner text</button>
<!-- Narrator reads: "Title attribute" -->
<button title="Title attribute">Inner text</button>
<!-- Narrator reads: "ARIA label" -->
<button title="Title attribute" aria-label="ARIA label" >Inner text</button>

JavaScript를 사용하는 Windows 스토어 앱의 도구 설명

JavaScript를 사용하는 Windows 스토어 앱의 도구 설명은 접근성 있는 이름이나 접근성 있는 설명에 영향을 주지 않습니다. 화면 낭독 프로그램은 JavaScript를 사용하는 Windows 스토어 앱에 도구 설명이 표시되면 이를 알려 주지만, 도구 설명 또는 접근성 있는 이름이나 설명에 대해 동일한 텍스트를 사용하지 않으려면 명시적으로 설정해야 합니다.


<!-- The P element holds the text to use for the tooltip and description. -->
<p id="backTooltipText">Use this button to navigate back</p>
<button id="back" aria-describedby="backTooltipText">Back</button>
<script>
    var back = document.getElementById('back');
    var backTooltipText = document.getElementById('backTooltipText');

    var myTooltip = Win.UI.Tooltip(back);
    myTooltip.innerHTML = backTooltipText.innerHTML;
</script>

참고  텍스트를 표시하지 않으려면 CSS 스타일시트를 사용하여 p 요소를 보이지 않게 할 수 있습니다.

XAML UI의 도구 설명

도구 설명용 XAML UI 시스템에서는 명시적인 ToolTip 요소를 사용하거나, 아니면 모든 UIElementToolTipService.ToolTip 특성을 사용하여 텍스트 전용 도구 설명을 설정할 수 있습니다. 도구 설명의 텍스트 내용은 도구 설명이 연결된 요소의 Microsoft UI 자동화를 위한 HelpText 속성으로 승격됩니다. 이 텍스트는 ToolTip 요소 자체의 Name 값이기도 하지만 도구 설명 자체는 일반적으로 UI 자동화 트리의 내용 보기에 표시되지 않습니다. XAML 도구 설명 서비스는 화면 판독기에서 열려 있는 도구 설명에 포커스가 있는 것을 인식하도록 필요한 UI 자동화 이벤트를 발생시킵니다. 그런 다음 화면 판독기는 HelpText 값에서 읽을 텍스트를 가져올 수 있습니다. XAML UI의 도구 설명을 사용하는 방법에 대한 자세한 내용은 도구 설명을 추가하는 방법을 참조하세요. UI 자동화에서 도구 설명을 처리하는 방법에 대한 자세한 내용은 도구 설명 컨트롤 유형을 참조하세요.

관련 항목

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

 

 

표시:
© 2014 Microsoft. All rights reserved.