Dijital erişilebilirliğin en önemli yönlerinden biri, sayfanın temel yapısıdır. Web sitenizi veya uygulamanızı yalnızca stillere dayalı olarak değil, yapısal öğeler kullanarak oluşturduğunuzda, ekran okuyucu gibi yardımcı teknolojiler (AT) kullanan kullanıcılara kritik bağlam sağlarsınız.
Yapısal öğeler, ekrandaki içeriğin ana hatlarını oluşturur ancak içerikte daha kolay gezinmeye olanak tanıyan ana noktalar olarak da işlev görür.
Semantik HTML öğeleri 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çerik, semantik olmayan öğelere kıyasla daha anlamlı hale gelir. İlişki oluşturmak veya genel kullanıcı deneyimini iyileştirmek için ek ARIA özellikleri eklemeniz gerekebilir. Ancak çoğu durumda, mevcut 100'den fazla HTML öğesinden biri kendi başına oldukça iyi çalışır.
Bu modül, dijital erişilebilirlik için kritik olan en yaygın yapısal öğelere odaklansa da web sitenize veya uygulamanıza yapı oluştururken dikkate almanız gereken ek öğeler ve çevresel faktörler vardır. Bu örnekler, her şeyi kapsayan bir liste yerine konuya giriş niteliğindedir.
Önemli noktalar
AT kullanıcıları, sayfanın genel düzeni hakkında bilgi edinmek için yapısal öğelere güvenir. İçeriğin büyük bölümlerini ayırırken sayfanıza yapısal bağlam eklemek için ARIA yer işareti rollerini veya daha yeni HTML yer işareti öğelerini kullanabilirsiniz.
Yer işaretleri, içeriğin gezinilebilir bölgelerde olması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 kullanmayı önerir. Bu tür bir yedekleme, kullanıcılarınız için sorun oluşturmasa da emin olmak için kalıpları bir ekran okuyucu kullanarak test edin. Şüphe duyuyorsanız tarayıcı desteği çok güçlü olduğundan varsayılan olarak yalnızca daha yeni HTML yer işareti öğelerini kullanmak en iyisidir.
HTML yer işareti öğelerini, eşleştirilmiş olarak karşılık gelen ARIA yer işareti rolleriyle karşılaştıralım.
HTML yer işareti öğesi | ARIA belirgin işareti rolü |
---|---|
<header> |
banner |
<aside> |
complementary |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
main |
<form> 1 |
form |
<section> 1 |
region |
Ardından, erişilebilir içerik yapısı örneklerini karşılaştırın.
<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 şekilde uygulandığında HTML başlık seviyeleri, sayfa içeriğinin genel hatlarını kısaca özetler.
Kullanabileceğimiz altı başlık düzeyi vardır. Başlık düzeyi bir <h1>
, sayfanın en yüksek ve en önemli bilgileri için kullanılır. En düşük ve en az önemli bilgiler için ise başlığın altı düzeyine <h6>
kademeli olarak geçilir.
Başlık düzeylerinin sırası önemlidir. İdeal olarak, başlık düzeylerini atlamamalısınız. Örneğin, bir bölümü <h1>
ile başlatıp hemen ardından <h5>
ile devam etmemelisiniz. Bunun yerine, sırayla <h5>
'e geçmeniz gerekir. İçerikte gezinmenin başlıca yollarından biri olduğu için başlık düzeyi sırası özellikle AT kullanıcıları için önemlidir.
Başlıklar için doğru anlamsal yapıya ve sıraya uymanıza yardımcı olması amacıyla CSS stillerinizi başlık düzeylerinden ayırabilirsiniz. Bu sayede, başlık düzeyi sırasını korurken başlık stillerinde daha fazla esneklik elde edebilirsiniz. AT tarafından başlık olarak görülmedikleri için, başlık oluşturmak için yalnızca stilleri kullanmamanız önemlidir.
Başlıklar sahte olduğunda AT kullanıcılarına uygun yapı aktarılmaz.
Başlıklar, bilişsel ve dikkat eksikliği bozukluğu olan kullanıcılar için de faydalıdır. Sayfadaki en önemli bilgileri anlamalarına yardımcı olmak için başlık içeriğini anlamlı hale getirmek önemlidir.
<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, birbirine benzer öğeleri anlamsal olarak gruplandırarak onlara doğal bir anlam verme yöntemidir. Alışveriş listeniz veya göz ardı etmeye devam ettiğiniz hiç bitmeyen yapılacaklar listeniz gibi.
Üç tür HTML listesi vardır:
Liste öğesi <li>
öğesi, sıralı veya sırasız bir listedeki bir öğeyi temsil etmek için kullanılır. Açıklama terimi <dt>
ve tanım <dd>
öğeleri ise açıklama listesinde bulunabilir.
Doğru şekilde programlandığında bu öğeler, 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 liste adını ve listede kaç öğe olduğunu söyleyebilir. Kullanıcı listede gezinirken AT her liste öğesini sesli olarak okur ve listedeki numarasını belirtir (ör. beş öğeden birincisi, beş öğeden ikincisi vb.).
Öğeleri liste halinde gruplandırmak, liste içeriği genellikle daha fazla görsel boşluk olacak şekilde biçimlendirildiği ve içeriğin öz olduğu için bilişsel ve dikkat bozukluğu olan ve okuma güçlüğü çeken görme engelli kullanıcılara da yardımcı olur.
<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ı olarak çok karmaşık olabilir ancak temel anlam kurallarına uyduğunuzda çok fazla müdahale olmadan oldukça erişilebilir hale gelirler.
Düzen
İnternetin ilk günlerinde, görsel yapılar oluşturmak için kullanılan birincil HTML öğesi düzen tablolarıydı. Günümüzde, yerleşim oluşturmak için <div>
ve yer işaretleri gibi semantik ve semantik olmayan öğelerin bir karışımını kullanıyoruz.
Sayfa düzeni tabloları oluşturma dönemi büyük oranda sona ermiş olsa da görsel açıdan zengin e-postalarda, bültenlerde ve reklamlarda sayfa düzeni tablolarının hâlâ kullanıldığı durumlar vardır. Bu durumlarda, yalnızca sayfa düzeni için kullanılan tablolarda <th>
veya <caption>
gibi ilişkileri aktaran ve bağlam ekleyen yapısal öğeler kullanılmamalıdır.
İçerik tabloları, ARIA sunum rolü veya aria-hidden durumu ile 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 bir düzen tablosunun aksine, veri tablosu ve tüm öğeleri gösterilmelidir. Veri tablolarının yapısı, basit ve karmaşık bilgileri kullanıcılara iletmek için çok önemlidir.
Tablo doğru şekilde yapılandırıldığında sütun başlıkları ile satırlar ve 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, kod aracılığıyla ilişki oluşturma işlemi farklı şekillerde gerçekleştirilir. Bir tabloyu erişilebilir hale getirmenin ilk adımı, başlık hücrelerini <th>
, veri hücrelerini ise <td>
öğeleriyle işaretlemektir.
Daha karmaşık tablolar için anlam ve ilişkileri aktarmak amacıyla <rowgroup>
, <colgroup>
, <caption>
ve scope
gibi ek HTML tablo öğ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>