İçerik yapısı

Dijital erişilebilirliğin en önemli yönlerinden biri, yapılandırabilirsiniz. Web sitenizi veya uygulamanızı yapısal öğeler eleştirel bir bakış açısıyla, yardımcı araçları kullanan kişilere eleştirel bir teknolojiler (AT) kullanır.

Yapısal öğeler ekrandaki içeriğin ana hatları gibi işlev görür, ancak aynı zamanda, içerikte daha kolay gezinmeye olanak tanımak için sabitleme noktaları olarak da işlev görür.

Anlamsal HTML öğelerini kullandığınızda, her öğenin kendi içinde bulunduğu anlam, erişilebilirlik ağacına aktarılır daha fazla anlam ifade eder. Bazı durumlarda, derleme işlemi için ek ARIA özellikleri eklemeniz gerekebilir. genel kullanıcı deneyimini geliştirmek için değil, durumlarda, 100'den fazla HTML öğesinden biri kendi başına oldukça iyi çalışması gerekir.

Bu modülde, en yaygın kullanılan ve kritik öneme sahip yapısal unsurlara dışında da kuşkusuz daha fazla unsur web sitenizin yapısını oluştururken göz önünde bulundurmanız gereken çevresel etmenler uygulamasını indirin. Bu örnekler her şeyi kapsamak yerine, konuya giriş niteliğindedir.

Önemli noktalar

AT kullanıcıları, ATT kullanıcıları hakkında bilgi vermek için yapısal öğelerden yararlanır. Genel sayfa düzeni. İçeriğin büyük bölümlerini ayırırken eklemek için ARIA önemli nokta rollerini veya daha yeni HTML yer işareti öğelerini kullanın yapısal bağlamı sağlar.

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

Bazı kaynaklarda ARIA ve HTML önemli noktalarının birleştirilmesini önermektedir Böylece daha iyi AT kapsamı elde edebilirsiniz. Bu tür bir fazlalık, kullanıcılar için sorunlara neden oluyorsa, modelleri bir ekran okuyucu kullanarak test edin emin olun. Şüpheye düştüğünüzde, varsayılan olarak yalnızca yeni HTML'yi kullanmak en iyisidir öğelerdir. Örneğin, tarayıcı desteği, güçlüdür.

HTML belirgin işareti öğelerini şu şekilde karşılaştıralım: eşledi karşılık gelen ARIA önemli nokta rolleridir.

Ş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ıklar

Doğru uygulandığında, HTML başlık düzeyleri genel sayfa içeriğini kısa ve öz bir şekilde açıklama

Kullanabileceğimiz altı başlık düzeyi vardır. Sayfanın en yüksek ve en önemli bilgileri için birinci başlık düzeyi <h1> kullanılır ve bu düzeyler kademeli olarak en düşük ve en önemsiz bilgiler için altıncı düzey <h6>.

Başlık düzeylerinin sırası önemlidir. İdeal olarak, başlık seviyeleri (örneğin, bir bölüme <h1> ile başlayıp hemen ve ardından bir <h5> ile takip ediliyor. Bunun yerine şu görevde ilerlemeniz gerekir: <h5> sipariş. Başlık düzeyinde sıralama özellikle AT kullanıcıları için önemlidir Bu, içerikte gezinmenin birincil yollarından biri.

Başlıklarda doğru anlamsal yapı ve sıralamaya bağlı kalmanıza yardımcı olması için, CSS stillerinizi başlık düzeylerinden ayırabilirsiniz. Bu sayede Başlık düzeyi sıralamasını korurken başlık stillerinde daha fazla esneklik elde edebilir. Başlık oluşturmak için tek başına stiller kullanmamanız çok önemlidir, çünkü bunlar bir başlık olarak görülmez.

Sahte başlıklar kullandığımızda, uygun yapı AT kullanıcılarına iletilmez.

Başlıklar bilişsel ve dikkat eksikliği olan kişiler için de faydalıdır bozuklukları. Başlık içeriğini anlamlı hâle getirerek, sayfadaki en önemli şeyi anlayabilirsiniz.

<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 öğeleri benzer nitelikte, anlamsal olarak gruplandırmaya yarayan bir yöntemdir. örneğin market listeniz veya bitmek bilmeyen yapılacaklar listeniz gibi görmezden gelmeye devam edin.

Üç tür HTML listesi vardır:

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

<li> liste öğesi öğesi sıralı veya sırasız listedeki bir öğeyi temsil etmek için kullanılır. açıklama terimi <dt> ve tanım <dd> öğeleri açıklama listesinde bulabilirsiniz.

Bu öğeler doğru programlandığında, görünmeyen AT kullanıcılarını listenin görünür yapısını belirleyin. AT bir anlamsal liste ile karşılaştığında kullanıcıya liste adını ve içinde kaç öğe olduğunu söyleyebilir. Kullanıcı olarak varsa, AT her liste öğesini sesli okur ve size listedeki hangi numaranın olduğunu belirleyin. Örneğin, beş öğeden birincisi, beşten ikincisi vb.

Öğeleri listeler halinde gruplandırmak, bilişsel ve zihinsel dikkat bozuklukları ve okuma güçlüğü bulunanlar ile içerik, genellikle daha fazla görsel boşluğa sahip olacak şekilde tasarlanıyor ve içerik isabetli oluyor.

<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ı anlamlar için yapısal öğeler. Tablolar yapısı çok karmaşık olabilse de temel anlamsal kurallara sahip olduğundan, çok fazla müdahale gerektirmeden kolayca erişilebilir durumdadırlar.

Düzen

İnternetin ilk günlerinde düzen tabloları birincil HTML öğesiydi görsel yapılar oluşturmak için kullanılır. Günümüzde, hem anlamsal hem de yerleşim oluşturmak için <div> ve önemli noktalar gibi anlamsız öğeler kullanın.

Düzen tablolarının oluşturulduğu günler çoğunlukla sona erse de düzen tabloları hâlâ kullanılmaktadır. Örneğin, görsel açıdan zengin e-postalar, bültenler ve reklamlar. Bu gibi durumlarda, yalnızca düzen için kullanılan tablolar ilişkileri ileten ve bağlam katan, örneğin <th> veya <caption>.

Düzen tabloları, ARIA kullanan AT kullanıcılarından da gizlenmelidir sunu rolü veya aria-hidden state'a gidin.

<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 bir düzen tablosunun aksine, veri tablosu ve tüm öğeleri gösterilmelidir. Veri tablolarının yapısı, basit bir veri kümesi anlaması zorlaşıyor.

Bir tablo doğru şekilde yapılandırıldığında, sütun arasında ilişki oluşur başlıkları ve satırları, tablodaki verileri ve Yanlış yapılandırıldığında, kullanıcının açıklama metnindeki bilgilerin anlamını ve bağlamını tablosunu oluşturalım.

Tablonun karmaşıklığına bağlı olarak, kod aracılığıyla ilişki kurmak nasıl yapılacağını göstereceğim. Bir tabloyu erişilebilir hale getirmenin ilk adımı veya <th> ve veri hücreleri <td> öğeli.

Daha karmaşık tablolar için ek HTML tablo öğeleri kullanmanız gerekebilir örneğin: <rowgroup> <colgroup>, <caption>, ve scope adresinden anlam ve ilişkileri iletmenize yardımcı olur.

<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>