İçerik yapısı

Dijital erişilebilirliğin en önemli yönlerinden biri, sayfanın temel yapısıdır. Web sitenizi veya uygulamanızı yalnızca stillere güvenmek yerine yapısal öğeleri kullanarak oluşturduğunuzda, ekran okuyucu gibi yardımcı teknolojiler (AT) kullanan kişilere kritik bağlamlar verirsiniz.

Yapısal öğeler ekrandaki içeriğin ana hatlarını oluşturabilir, ancak aynı zamanda içerikte gezinmeyi kolaylaştırmak için demir atma noktaları olarak da görev yapar.

Semantik HTML öğelerini kullandığınızda, her öğenin doğal anlamı erişilebilirlik ağacına aktarılır ve AT tarafından kullanılır. Böylece, içeriğe, anlamsal olmayan öğelere göre daha fazla anlam verilir. İlişki kurmak veya genel kullanıcı deneyimini geliştirmek için ek ARIA özellikleri eklemeniz gereken durumlar olabilir, ancak çoğu durumda mevcut 100'den fazla HTML öğesinden biri kendi başına oldukça iyi çalışacaktır.

Bu modül, dijital erişilebilirlik açısından kritik öneme sahip en yaygın yapısal öğelere odaklansa da, web sitenize veya uygulamanıza yapı oluştururken dikkat etmeniz gereken bazı ek unsurlar ve çevresel faktörler de mevcuttur. Bu örnekler, her şeyi kapsayan değil, konuya giriş niteliğindedir.

Önemli noktalar

AT kullanıcıları, sayfanın genel düzeni hakkında bilgi vermek için yapısal öğelerden yararlanır. İçeriklerin geniş bölgelerini bölümlere ayırırken sayfanıza yapısal bağlam eklemek için ARIA önemli nokta rollerini veya daha yeni HTML yer işareti öğelerini kullanabilirsiniz.

Önemli noktalar, içeriğin gezinilebilir bölgelerde yer almasını sağlar. Sayfa başına en az bir yer işareti sağlamanız önerilir.

Bazı kaynaklar, daha iyi AT kapsamı sağlamak için ARIA ve HTML yer işaretlerini birlikte birleştirmeyi önerir. Bu tür bir yedeklilik kullanıcılarınız için soruna neden olmamalıdır ancak emin olmak için ekran okuyucu kullanarak kalıpları test edin. Şüpheye düştüğünüzde, varsayılan olarak yalnızca yeni HTML önemli nokta öğelerini kullanmak en iyisidir, zira tarayıcı desteği çok güçlüdür.

Eşlenen HTML önemli nokta öğelerini karşılık gelen ARIA önemli nokta rolleriyle karşılaştıralım.

Şimdi, erişilebilir içerik yapısı örneklerini karşılaştıralım.

<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>

<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

Başlık

Doğru uygulandığında HTML başlık düzeyleri, genel sayfa içeriğinin kısa ve öz bir ana hatlarını oluşturur.

Kullanabileceğimiz altı başlık düzeyi vardır. İlk başlık düzeyi <h1>, sayfanın en yüksek ve en önemli bilgileri için kullanılır ve en düşük ve en az önemli bilgi için aşamalı olarak altıncı başlık düzeyi <h6>'e taşınır.

Başlık seviyelerinin sırası önemlidir. İdeal olarak, başlık seviyelerini atlamamalısınız. Örneğin, bir bölüme <h1> ile başlayıp hemen ardından <h5> ile devam edebilirsiniz. Bunun yerine, sırasıyla <h5> adımına ilerlemeniz gerekir. Başlık düzeyinde sıralama, özellikle AT kullanıcıları için önemlidir. Çünkü bu, kullanıcıların içerikte gezinmenin başlıca yollarından biridir.

Başlıkların uygun semantik yapısına ve sırasına uymanıza yardımcı olması için CSS stillerinizi başlık düzeylerinden ayırmayı deneyin. Bu, başlık seviyesi sırasını korurken başlık stillerinde daha fazla esneklik sağlar. Stilleri, AT tarafından başlık olarak görülmediği için, bu başlıklar oluşturmak için tek başına kullanmamanız çok önemlidir.

Sahte başlıklar sunduğumuzda AT kullanıcılarına uygun yapı iletilmemektedir.

Başlıklar, bilişsel ve dikkat bozukluğu bozuklukları olan kişiler için de faydalıdır. Başlık içeriğini anlamlı hale getirmek, kullanıcıların sayfada nelerin en önemli olduğunu anlamalarına yardımcı olur.

<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of 
  postage stamps, stamped envelopes, postmarks, postcards, and 
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>

<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of 
    postage stamps, stamped envelopes, postmarks, postcards, and 
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

Listeler

HTML listeleri, alışveriş listeniz veya sürekli yok saydığınız yapılacaklar listesine benzer şekilde, birbirlerine doğal bir anlam katan, birbirine benzer öğeleri anlamsal olarak gruplandırmanın bir yoludur.

Üç tür HTML listesi vardır:

• <ol> sipariş edildi
• sırasız <ul>
• açıklama <dl>

Liste öğesi <li> öğesi, sıralanmış veya sıralanmamış listedeki bir öğeyi temsil etmek için kullanılır. Açıklama terimi <dt> ve tanım <dd> öğeleri ise açıklama listesinde bulunabilir.

Bu öğeler doğru şekilde programlandığında, görme engelli AT kullanıcılarını listenin görünür yapısı hakkında bilgilendirebilir. Bir AT, anlamsal bir listeyle karşılaştığında kullanıcıya listenin adını ve içinde kaç öğe olduğunu söyleyebilir. Kullanıcı listede gezinirken, AT her bir liste öğesini sesli okur ve listede hangi numaranın olduğunu söyler: beşten birinci, beşin ikinci öğesi vb.

Öğeleri listeler halinde gruplandırmak, bilişsel ve dikkat bozuklukları olan görme engelli ve okuma güçlüğü olan kişilere de yardımcı olur. Çünkü liste içeriği genellikle daha fazla görsel boşluğa sahip olacak şekilde biçimlendirilir ve içerik sadedir.

<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>

<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

Tablolar

HTML'de tablolar genellikle verileri veya sayfa düzenini düzenlemek için kullanılır.

Tablonun amacına bağlı olarak, farklı anlamsal yapısal öğeler kullanırsınız. Tablolar yapıları gereği çok karmaşık olabilir, ancak temel semantik kurallara bağlı kaldığınızda, fazla bir müdahaleye gerek kalmadan oldukça erişilebilir hale gelirler.

Düzen

İnternetin ilk günlerinde, düzen tabloları, görsel yapılar oluşturmak için kullanılan birincil HTML öğesiydi. Günümüzde düzen oluşturmak için <div> ve önemli noktalar gibi anlamsal ve anlamsal olmayan öğeleri bir arada kullanıyoruz.

Düzen tabloları oluşturma günleri çoğunlukla geride kalmış olsa da görsel açıdan zengin e-postalar, bültenler ve reklamlar gibi düzen tablolarının kullanılmaya devam ettiği zamanlar olacaktır. Bu durumlarda, yalnızca düzen için kullanılan tablolar, ilişkileri aktaran ve bağlam ekleyen yapısal öğeler (<th> veya <caption> gibi) kullanmamalıdır.

Düzen tabloları, ARIA sunu rolüne veya aria gizli durumuna sahip olan AT kullanıcılarından da gizlenmelidir.

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>

<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

Veriler

AT kullanıcılarından gizlenmesi gereken düzen tablosunun aksine, veri tablosu ve tüm öğeleri açıklanmalıdır. Veri tablolarının yapısı, kullanıcılara basit ve karmaşık bilgilerin aktarılmasında kritik öneme sahiptir.

Bir tablo doğru şekilde yapılandırıldığında, sütun başlıkları ile satırlar ile tablodaki veriler arasında ilişkiler oluşur. Yanlış yapılandırıldığında kullanıcının tablodaki bilgilerin anlamını ve bağlamını çözmesi gerekir.

Tablonun karmaşıklığına bağlı olarak, kodlar aracılığıyla ilişki kurma farklı şekillerde yapılabilir. Bir tabloyu erişilebilir hale getirmenin ilk adımı, başlık hücrelerini <th> ve veri hücrelerini <td> öğeleriyle işaretlemektir.

Daha karmaşık tablolarda, anlamı ve ilişkileri belirtmek için <rowgroup>, <colgroup>, <caption> ve scope gibi ek HTML tablosu öğeleri kullanmanız gerekebilir.

<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>