Ana içeriğe geç

1.3.2 Anlamlı Sıralama

İçeriğin sırası anlamı etkiliyorsa, okuma ve gezinme sırası programatik olarak belirlenebilmelidir.

SC Kodu: 1.3.2 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#meaningful-sequence

Genel Tanım​

WCAG SC 1.3.2, içeriğin sunulma sırasının tüm kullanıcılar için gezinme sırasında anlamlı olmasını gerektirir. Bu, ekran okuyucu kullananlar veya web sitesinin stil sayfasını geçersiz kılan kendi stil sayfalarını kullananlar gibi yardımcı teknoloji kullanıcılarının içeriği doğru bir şekilde anlamasını ve takip etmesini sağlar.

Faydalar​

  • Geliştirilmiş Gezinme: Görme engelli kullanıcıların içeriğe mantıklı ve anlamlı bir sırayla erişebilmelerini sağlar.

Ana Amaç​

İçeriğin okuma sırasının anlamlı ve doğru şekilde kodlanmasını sağlayarak tüm kullanıcılar için erişilebilir olmasını temin etmek.

En İyi Uygulamalar​

  • Mantıklı ve Sezgisel İçerik: Sayfada sunulan içeriğin mantıklı ve sezgisel olduğundan emin olun.
  • Önce HTML: Önce HTML yapısını yazın, ardından tasarım ve düzen için CSS uygulayın.
  • Görsel ve DOM Sırasını Eşleştirin: İçeriğin görsel sırasının DOM sırasıyla eşleştiğinden emin olun.
  • Anlamsal Öğeleri Kullanın: İçeriğinizi başlıklar, listeler ve paragraflarla işaretleyin.

Navigasyonu Ayırt Edin: Kullanıcıların navigasyon menülerini ana içerikten ayırt edebilmelerini sağlayın.

Ekran Okuyucularla Test Edin: İçeriğin mantıksal akışını koruyup korumadığını kontrol etmek için NVDA gibi bir ekran okuyucu kullanın veya stil sayfalarını devre dışı bırakın.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir web sayfası, gezinme çubuğunu, ana haberi ve yan haberi konumlandırmak için CSS kullanıyor.

Nelerden Kaçınılmalı?

HTML/CSS

<div class = "main-story" >
<h1> Ana Haber </h1>​
  <p> Ana haber içeriği ... </p>
</div>

<nav class="nav-bar" >
  <ul>
    <li>Ana Sayfa</li>
    <li>Hakkımızda</li>
  </ul>​​
</nav>​​

<div class = "side-story" >
  <h2> Yan Hikaye </h2>​
  <p> Yan hikaye içeriği ... </p>
</div>
<style> 
.nav-bar {
  position : absolute ;
  top : 0 ;
  left : 0 ; 
}

.ana-hikaye {
  konum : mutlak ;
  üst : 50 piksel ;
  sol : 100 piksel ; 
}

.yan-hikaye {
  konum : mutlak ;
  üst : 50 piksel ;
  sol : 500 piksel ; 
}

</style>​​

Açıklama: Görsel olarak, önce gezinme çubuğu, ardından ana hikaye ve yan hikaye görünür. Ancak, DOM sıralaması ana hikayeyi ilk sıraya koyar; bu da ekran okuyucular için kafa karıştırıcı bir okuma sırasına veya kullanıcıların kendi stil sayfalarını uygulamasına yol açar.

Ne Yapılmalı?

HTML/CSS

<nav class = "nav-bar" >
  <ul>
    <li>Ana Sayfa</li>
    <li>Hakkımızda</li>
  </ul>​​
</nav>​​

<div class = "main-story" >
<h1> Ana Haber </h1>​
<p> Ana haber içeriği ... </p>
</div>

<div class = "side-story" >
  <h2> Yan Hikaye </h2>​
  <p> Yan hikaye içeriği ... </p>
</div>

<style> 

.nav-bar {
  float : left ;
  width : 20% ; 
}

.ana-hikaye {
  float : left ;
  width : 50% ; 
}

.yan-hikaye {
  float : left ;
  width : 30% ; 
}

</style>​​

Açıklama: Doğru uygulamada, DOM sıralaması görsel sıralamayla eşleşir. CSS, mantıksal okuma sırasını değiştirmeden öğeleri konumlandırarak erişilebilirliği sağlar.