접근 가능한 랜드마크

WCAG 2.4.1 우회 차단 성공 기준에 따르면 화면 판독기와 같은 보조 기술은 사용자가 랜드마크를 탐색하여 여러 웹 페이지에서 반복되는 콘텐츠 블록을 우회할 수 있도록 해야 합니다.

의미론적으로 올바르고 정확하게 HTML 구조를 정의하는 것이 필수적입니다. 랜드마크는 사용자가 보조 기술을 사용하여 페이지의 콘텐츠를 탐색하는 데 도움이 되는 추상적이고 중요한 역할을 합니다. 프로그래밍 방식으로 페이지의 섹션을 식별하고 사용자가 보다 의미 있는 방식으로 콘텐츠를 인식할 수 있습니다.

핵심은 페이지의 논리적 구조를 식별하고 적절한 랜드마크 역할 또는 HTML5 정의 요소를 사용하여 의미론적으로 유효한 페이지를 구축하는 것입니다.

거의 모든 페이지는 header , main , navigation , region , footer 및 side 와 같은 표준 구조를 가지고 있습니다 .

<header> 는 일반적으로 상단에 있는 페이지의 배너를 식별합니다. 주로 검색, 브랜드 로고 및 기본 탐색을 포함합니다. 이상적으로는 각 페이지에 하나의 배너 랜드마크만 있어야 합니다.

Using the HTML5 element

<header>
  <div>
    company logo..brand name
  </div>
  <nav>
    main navigation of the website
  </nav>
</header>

Using the Aria Technique

<div role=“header”>
    company logo.. brand name or navigation 
</div>

Using the HTML5 element

<main>
  <h1> main heading for the page </h1>
  <div> main content goes here </div>
</main>

Using the Aria Technique

<div role=“main”>
  <h1> main heading of the page </h1>

   ........main content goes here.......

</div>

Using the HTML5 element 

<nav id="primary-nav" aria-label="primary navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
    <li><a href="page-link-4">page link 4</a></li>
  </ul>
</nav>

More than one <nav> tag in the same page

<nav aria-labelledby="pagination-nav">
  <h2 id="pagination-nav">heading content</h2>
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</nav>

Using the Aria Technique

<div role="navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</div>

HTML structure

<header>
  <a href="#main" id="skip-links" class="offscreen">
    skip to main
  </a>
</header>
<main id="main"></main>
CSS

.offscreen{
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;

  &:focus {
    position: static;
    margin: auto;
    width: auto;
    height: auto;
    }
}

Using the HTML5 element

<section aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
  .....region content goes here.....
</section>

Using the Aria Technique 

<div role="region" aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
   .........region content goes here.........
</div>

Using the HTML5 element

<footer>
  <p>......footer content goes here....</p>
  <ul>
    <li><a href="page_link_1.html">page link 1</a></li>
    <li><a href="page_link_2.html">page link 2</a></li>
  </ul>
</footer>

Using the Aria Technique 

<div role="contentinfo">
  <p>......footer content goes here......</p>
</div>

Using the HTML5 element 

<aside aria-labelledby="heading_id">
  <h2 id="heading_id">.......heading content goes here....</h2>
  ........region content goes here.......
</aside>


Using the Aria Technique 

<div role="complementary" aria-labelledby="heading_id">
  <h2 id="heading_id">heading content goes here</h2>
  ......region content goes here......
</div>

JAWS
Insert + Control + R 누르기 => 랜드마크 목록
Q => 메인 랜드마크로
가기 R => 다음 랜드마크로 가기
shift+ R => 이전 랜드마크로 가기

NVDA
Insert + F7 누르기 => 랜드마크 목록
D => 메인으로 가기 Landmark
shift + D => 이전 랜드마크 보이스오버로 이동

Control
+ Option + U 누르기 => 랜드마크 목록
W => 다음 랜드마크로
이동 Shift + W => 이전 랜드마크로 이동