UI 요소에 대한 기본 정보 표시(HTML)

Applies to Windows and Windows Phone

이 항목의 C#/VB/C++/XAML 버전을 찾고 계세요?UI 요소에 대한 기본 정보 표시XAML를 참조하세요.

화면 읽기 프로그램 같은 보조 기술에는 앱의 UI 요소에 대한 정보가 필요합니다. 시스템은 앱의 HTML 마크업을 기반으로 정보를 제공합니다. 이 항목에서는 보조 기술에 필요한 기본 정보를 앱에 표시하기 위해 구현해야 하는 HTML에 대해 설명합니다.

접근성 있는 이름

접근성 있는 이름은 화면 읽기 프로그램이 UI 요소를 읽기 위해 사용하는 짧은 설명 텍스트 문자열입니다. 콘텐츠를 이해하거나 UI를 조작하는 데 있어 중요한 의미가 있는 UI 요소에는 접근성 있는 이름을 설정해야 합니다. 그러한 요소에는 일반적으로 이미지, 입력 필드, 단추, 컨트롤, 영역 등이 포함됩니다.

다음 표에서는 다양한 유형의 HTML 요소에 대해 접근성 있는 이름을 정의하는 방법에 대해 설명합니다.

요소 유형설명
정적 텍스트텍스트 및 기타 HTML 태그의 경우 접근성 있는 이름은 표시되는 (내부) 텍스트를 기반으로 합니다. ph1 태그를 예로 들 수 있습니다.
이미지이미지의 경우 alt 특성이 접근성 있는 이름으로 사용됩니다. 이는 img 태그를 사용하여 지정하는 이미지, <input type="image"> 태그를 사용하여 지정하는 이미지 단추 및 이미지 맵과 함께 사용하는 area 태그에 적용됩니다. 이미지 맵에 대한 자세한 내용은 W3C(World Wide Web 컨소시엄) HTML5 사양에서 이미지 맵을 참조하세요.
양식 필드<input type="text| password| checkbox| radio|..."> 같은 양식 필드나 select 또는 textarea 태그의 접근성 있는 이름은 필드에 대해 표시되는 레이블과 동일해야 합니다. 레이블과 입력 필드를 연결하는 기본적인 방법은 label 태그를 사용하고 for 특성을 설정하는 것입니다. 사용자가 label 태그를 클릭하면 연결된 컨트롤로 포커스가 이동합니다. UI 요소의 레이블 지정에 대한 자세한 내용은 Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) 1.0 Authoring Practices에서 Labeling and Describing을 참조하세요.
단추 및 링크 기본적으로 단추 또는 링크의 접근성 있는 이름은 표시되는 텍스트를 기반으로 합니다. abutton 태그의 접근성 있는 이름은 태그의 내부 텍스트를 기반으로 하며, type="button"input 태그의 접근성 있는 이름은 value 특성을 기반으로 합니다.
테이블테이블의 접근성 있는 이름은 일반적으로 테이블의 caption 태그를 사용하여 정의됩니다.
structure 및 landmark 요소화면 낭독 프로그램은 레이블을 사용하여 문서를 탐색하므로 structure 및 landmark 요소에 레이블을 지정하는 것이 중요합니다. 레이블이 필요한 요소에는 양식, 프레임, 영역을 비롯하여 "main", "navigation" 및 "search" 같이 landmark 역할을 하는 기타 요소가 있습니다.
div의 요소

사용자 지정 요소를 비롯해 일반적으로 div 태그를 사용하여 정의하는 모든 요소의 경우 다음 특성 중 하나를 사용하여 접근성 있는 이름을 설정할 수 있습니다.

  • aria-labelledby—접근성 있는 이름으로 사용할 텍스트를 포함하는 요소를 참조합니다.
  • aria-label—접근성 있는 이름을 직접 설정합니다.
  • title—접근성 있는 이름으로도 사용되는 도구 설명을 만듭니다.

기본 HTML 특성을 다시 정의하려면 사용자 지정 UI 요소(예: div 태그)와 함께 위 특성을 사용해야 합니다.

 

이 예제에서는 다양한 유형의 HTML 요소에 대해 접근성 있는 이름을 정의하는 방법을 보여 줍니다.


<!--Label landmark regions by using aria-labelledby or aria-label. -->      
<h1 id="formLabel">Personal Information</h1>
<form aria-labelledby="formLabel" ... > 

    <!-- The label tag with "for" attribute sets the name of the input field. -->
    <label for="fullname">Full Name</label>
    <input id="fullname" type="text" accesskey="N"/>

    <!-- Alt text is used as the image accessible name. -->      
    <img src="..." alt="Personal Photo" />

    <!-- An image button's accessible name is set with the alt attribute. -->
    <input type="image" src="images/back.png" alt="Back" onclick="..." />

    <!-- Inner text is used as the accessible name for A, BUTTON, P, and so on. -->
    <a href="...">More Photos</a> 

    <!-- The submit button uses default caption text as the accessible name. -->
    <input type="submit" /> 

</form>

Windows 런타임 컨트롤의 경우 데이터 바인딩을 사용하여 접근성 있는 이름을 설정할 수 있습니다.


<!-- Data binding maps the image alt attribute to the data source title field -->
<div class="..." data-win-control="Win.Binding.Template">
    <div class="image" data-win-bind="...; alt: title"></div>
    <div class="text">
        <h1 class="title" data-win-bind="textContent: title"></h1>
        <p class="description" data-win-bind="textContent: description"></p>
    </div>
</div>

<!-- List view can set the accessible name with aria-labelledby or aria-label. -->
<h1 id="pageTitle">Items collection page</ h1>
<div data-win-control="Win.UI.ListView" data-win-options="{...}" 
    aria-labelledby="pageTitle">
</div>

참고  Microsoft UI 자동화 접근성 플랫폼은 UI 자동화 클라이언트 사용에 대해 앱의 UI 트리 표시를 생성합니다. 이 UI 트리는 검사 및 조작을 위해 보조 기술에 사용할 수 있는 UI 요소의 구조를 나타냅니다. UI 자동화 정보를 직접 지정하지 않습니다. 하지만 Windows 런타임 호스트에서 기본 제공되는 지원을 활용합니다. 여기서는 HTML 콘텐츠에 적합한 모든 특성을 표시 중인 각 앱의 자동화 표시나 일반 접근성을 만드는 동일한 UI 자동화 정보로 변환합니다.

UI 요소에 UI 요소의 상태를 이해하는 데 중요한 연결 값이 있으면 이 정보를 접근성 프레임워크에 표시해야 합니다.

예를 들어, role 특성이 "slider", "progressbar" 또는 "spinbutton"으로 설정된 div 태그에서 호스트되는 HTML 컨트롤은 aria-valuemax, aria-valueminaria-valuenow 특성을 표시해야 합니다. 또한 앱에서 aria-valuenow특성을 동적으로 유지 관리하여 요소의 변경 사항을 반영해야 합니다. aria-valuenow 특성의 현재 값에 해당하는 텍스트 문자열을 제공하도록 aria-valuetext 특성을 설정하는 것이 좋습니다.


<div id="sl" role="slider" ... 
    aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"...>
</div>

<script>
    function manageValue()
    {
        ...
        // Dynamically maintain aria properties for the current value and text.
        sl.setAttribute("aria-valuenow", currentValue);
        sl.setAttribute("aria-valuetext", currentValueText);
        ...
    }
}
</script>


상태

경우에 따라 aria-disabled 특성을 사용하여 UI 요소의 접근성 있는 상태를 설정하고 유지 관리해야 할 필요가 있습니다. 그 중에서도 사용자 지정 UI 요소의 접근성 상태를 설정하고 유지 관리하는 것이 특히 중요합니다. 시스템에서는 모든 표준 UI 요소 및 Windows 컨트롤에 대한 접근성 있는 상태를 유지 관리하는 기능을 기본적으로 지원합니다.


<!-- Declaring accessibility attributes for a custom image button. -->
<div id="folders" role="tree" aria-label="Folders">
...
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if ( e.keyCode === Win.Utilities.Key.leftArrow) {
            // The node is collapsed if it has children
            e.srcElement.setAttribute('aria-expanded', false );
        } else if ( e.keyCode === Win.Utilities.Key.rightArrow) {
            // The node is expanded if it has children
            e.srcElement.setAttribute('aria-expanded', true );
        }
    });
</script>

참고  UI 자동화 트리에서 특정 요소와 모든 해당 콘텐츠를 제거하려면 aria-hidden 특성을 true 값으로 설정하여 사용하세요.

역할

사용자 지정 UI 요소에 유효한(구체적인) WAI-ARIA 역할을 할당해야 합니다. 이렇게 하면 화면 낭독 프로그램에 UI 요소로부터 예상되는 동작 및 속성에 대한 정보를 더 많이 제공할 수 있습니다.

또한 aria-labelledby 특성에서 참조되는 요소 및 사용자 조작에 중요한 UI 항목을 표시하는 요소에 대한 역할을 설정하는 것도 중요합니다.

다음 예제에서는 화면 낭독 프로그램이 트리 보기의 구조를 이해하고 확장–축소 동작을 표시할 수 있도록 트리 보기의 요소에 해당 WAI-ARIA 역할이 표시됩니다.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0" 
        aria-activedescendant="n-0" >
    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>
    <div role="group" >
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>
    </div>
</div>

접근성 개념을 보다 잘 나타내기 위해, 위 예제에 나오는 트리 보기는 각 트리 뷰 노드에 하나의 요소만 포함하는 것으로 단순화했습니다. 실제 구현에서는 확장 가능 노드에 두 개의 하위 요소가 포함될 수 있는데 하나는 확장–축소 기능을 나타내고, 다른 하나는 노드 활성화 기능(예: 포함된 파일 및 폴더 목록 로드)을 표시하는 데 사용됩니다.


<!-- An example of the expandable and actionable node. -->
...
    <div role="presentation">
    <img src="images/expand.png" role="presentation" onclick="expColl(event)"/>
    <span id="n-0" role="treeitem" onclick="activateItem(event)"
        aria-expanded="true" >Libraries</span>
    </div>
...

앞의 예제에서 role="presentation"은 UI 트리(또는 접근성 트리)에서 의미 값이 없는 요소를 제거합니다. 이때 role="presentation"은 UI 트리에서 현재 요소를 제거하지만 포함된 하위 요소에는 영향을 주지 않습니다. UI 트리에서 UI 요소와 함께 자식 요소를 모두 제거하려면 aria-hidden="true"를 사용하세요.

a 또는 img와 같은 일부 HTML5 태그에는 "presentation" 역할로만 덮어쓸 수 있는 강력한 암시적 역할이 있습니다.

접근성 있는 설명(선택)

접근성 있는 설명은 특정 UI 요소에 대해 추가적인 접근성 정보를 제공합니다. 일반적으로 접근성 있는 이름만으로 요소의 용도를 정확하게 전달할 수 없을 때 접근성 있는 설명을 사용합니다.

내레이터 화면 낭독 프로그램은 사용자가 Caps Lock + F를 눌러 요소에 대한 추가 정보를 요청하는 경우에만 요소의 접근성 있는 설명을 읽습니다.

접근성 있는 설명을 제공하는 가장 좋은 방법은 aria-describedby 특성을 사용하는 것입니다. 이 특성은 시스템에서 접근성 있는 설명으로 사용할 텍스트 콘텐츠를 가진 다른 UI 요소를 하나 이상 참조합니다. 또한 title 특성을 포함하는 도구 설명을 구현하여 접근성 있는 설명을 제공할 수도 있습니다. 자세한 내용은 도구 설명에 접근성 구현을 참조하세요.


<!-- Declaring visible text as the accessible description of a table. -->
<p id="tableDesc">This table describes travel expenses organized by destination and dates.</p>
<table aria-describedby="tableDesc">...<table>

관련 항목

기본 접근성 요구 사항 충족

 

 

표시:
© 2014 Microsoft