Landmark yang Dapat Diakses

Kriteria keberhasilan pemblokiran pintasan WCAG 2.4.1 menyatakan bahwa teknologi bantuan seperti pembaca layar harus memungkinkan pengguna untuk menavigasi berdasarkan bangunan terkenal untuk melewati pemblokiran konten yang berulang pada beberapa halaman web.

Sangat penting untuk mendefinisikan struktur HTML secara semantik dengan benar dan akurat. Tengara memainkan peran abstrak dan vital dalam membantu pengguna menavigasi konten halaman menggunakan teknologi asistif. Ini secara terprogram mengidentifikasi bagian halaman dan memungkinkan pengguna untuk memahami konten dengan cara yang lebih bermakna.

Kuncinya adalah mengidentifikasi struktur logis halaman dan menggunakan peran landmark yang sesuai atau elemen yang ditentukan HTML5 untuk membangun halaman yang valid secara semantik.

Hampir semua halaman memiliki struktur standar: header , main , navigation , region , footer , dan side .

<header> mengidentifikasi Spanduk pada halaman, yang umumnya terletak di bagian atas. Ini sebagian besar berisi pencarian, logo merek, dan navigasi utama. Idealnya, setiap halaman hanya boleh memiliki satu landmark Banner.

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
Tekan Insert + Control + R => Daftar Tengara
Q => Ke Tengara utama
R => Ke
shift Tengara berikutnya+ R => Ke Tengara sebelumnya

NVDA
Tekan Insert + F7 => Daftar Tengara
D => Ke utamaTengara
+ D => Ke Tengara sebelumnya

Voiceover
Tekan Kontrol + Option + U => Daftar Tengara
W => Ke Tengara berikutnya
Shift + W => Ke Tengara sebelumnya