Erişilebilir Yer İşaretleri

WCAG 2.4.1 Blokları atlama başarı kriteri, ekran okuyucular gibi yardımcı teknolojilerin, kullanıcıların birden çok web sayfasında tekrarlanan içerik bloklarını atlamak için yer işaretlerine göre gezinmesine izin vermesi gerektiğini belirtir.

HTML yapısının anlamsal olarak doğru ve doğru bir şekilde tanımlanması esastır. Yer işaretleri, kullanıcıların yardımcı teknolojileri kullanarak sayfanın içeriğinde gezinmesine yardımcı olmada soyut ve hayati bir rol oynar. Sayfanın bölümlerini programlı olarak tanımlar ve kullanıcıların içeriği daha anlamlı bir şekilde algılamasını sağlar.

Anahtar, sayfanın mantıksal yapısını belirlemek ve sayfayı anlamsal olarak geçerli oluşturmak için uygun yer işareti rollerini veya HTML5 tanımlı öğeleri kullanmaktır.

Hemen hemen tüm sayfaların standart bir yapısı vardır: üst bilgi , ana bilgi , gezinti , bölge , alt bilgi ve kenar .

<header> , sayfada genellikle en üstte bulunan bir Banner'ı tanımlar. Ağırlıklı olarak arama, marka logosu ve ana gezinmeyi içerir. İdeal olarak, her sayfada yalnızca bir Banner yer işareti olmalıdır.

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
Ekle + Control + R => Yer İşaretleri Listesi
Q => Ana Yer
İşaretine Git R => Sonraki Yer
shift+ R => Önceki Yer İşaretine git

NVDA
Ekle + F7 => Yer İşaretleri Listesi
D => Ana sayfaya git Yer işareti
kaydırma + D => Önceki Yer İşareti

Seslendirmesine
git Control + Option + U => Yer İşaretleri Listesine basın
W => Bir sonraki Yer İşaretine git
Shift + W => Önceki Yer İşaretine git