Windows 런타임 앱의 논리 구조 표시

Applies to Windows and Windows Phone

HTML의 논리 구조

접근성을 위해 structure 및 landmark 요소를 적절히 표시하면 화면 읽기 프로그램에서 페이지 요약이나 목차를 작성할 수 있습니다. 이러한 정보는 사용자가 페이지 콘텐츠를 이해하는 데 도움을 주고 페이지를 탐색할 수 있는 효율적인 방법을 제공합니다.

일반적으로는 모든 페이지 콘텐츠를 논리 영역과 선택적인 하위 영역으로 분리해야 하며, 각 영역과 하위 영역을 해당 landmark 역할과 접근성 있는 이름으로 표시해야 합니다. 특히 각 페이지에는 페이지의 주요 콘텐츠를 나타내는 role="main"이 표시된 영역이 하나 이상 포함되어야 합니다. 다른 중요한 landmark 역할은 "navigation""search"로, 탐색 또는 검색 기능이 있는 영역을 표시해야 합니다. 페이지 콘텐츠를 표시하는 그 밖의 landmark 역할에는 "banner", "contentinfo""complementary"가 있습니다.

앱에 기존 landmark 역할에 해당하지 않는 영역이 포함된 경우 "region"의 structure 역할을 사용하여 영역을 표시합니다. 마지막으로 모든 HTML 양식, 프레임 및 iframe 요소에 접근성 있는 이름으로 레이블을 지정해야 합니다.

영역에 레이블을 지정할 때는 영역 레이블로 사용할 표시되는 일부 텍스트를 참조하도록 aria-labelledby 특성을 사용합니다. 가능하면 <h1>, <h2>, <h3> 등의 HTML 제목 태그를 사용하거나 role="header" 및 해당 aria-level 특성으로 참조되는 텍스트를 표시하는 방법으로 헤더 요소를 사용하여 영역에 레이블을 지정합니다. 영역 레이블로 사용할 표시되는 텍스트가 없는 경우 aria-label 특성 또는 title 특성(주로 프레임 및 iframe 요소)을 사용하여 접근성 있는 이름을 설정합니다. 경우에 따라 aria-describedby 특성을 사용하여 표시된 설명을 추가로 영역에 포함할 수 있습니다. 자세한 내용은 W3C(World Wide Web 컨소시엄) 설명서에서 랜드마크 탐색(widget)(영문)을 참조하세요.


<div id="title" role="banner" aria-labelledby="label_title">
    <a href="..."><img class="logo" alt="Home Page" src="..." /></a>
    <h1 id="label_title">...</h1> 
  </div>    

  <div id="nav1" >
    <h2 class="nav" id="nav1_label">...</h2>
    <ul id="navigation1" role="navigation" aria-labelledby="nav1_label">
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
    </ul>
  </div>

  <form id="search" ...>
    <div role="search" aria-labelledby="search_box">
      <label for="search_box">Search for ...</label>
      <input type="text" id="search_box" >
      <input type="submit" value="Search">
    </div>
  </form>

  <div id="contact-info" role="complementary" aria-labelledby="contact_label">
    <h4 id="contact_label">contact info</h4>
  </div>
	
  <div id="content-col-1" role="main" aria-labelledby="main_label"> 
    <h1 id="main_label">Welcome to ...</h1>  
    ...
  </div>

  <div id="copyright" role="contentinfo">Copyright ...</div>

XAML의 논리 구조

XAML UI에는 일반 UI 요소에 논리 구조를 소개하는 데 사용되는 XHTML role 특성 및 어휘에 직접적으로 해당하는 특성 및 어휘가 없습니다. XAML은 보다 직접적으로 Microsoft UI 자동화를 지원하며 컨트롤 유형을 사용하여 UI의 요소를 설명합니다. XAML UI에서 사용되는 모든 컨트롤 또는 요소는 해당 컨트롤 유형을 UI 자동화 컨트롤 또는 콘텐츠 트리에 보고합니다. 그러나 "complementary"와 같은 순수한 의미 태깅은 UI 자동화에 매핑되지 않으며 XAML UI에서 사용되지 않습니다. UI 자동화에 ARIA 역할 매핑을 참조하세요.

관련 항목

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

 

 

표시:
© 2014 Microsoft