1.3.1 Bilgi ve İlişkiler

Bilgi, yapı ve ilişkiler; yardımcı teknolojilerin içeriği doğru şekilde yorumlayabilmesi için programatik olarak belirlenebilir olmalıdır.

SC Kodu: 1.3.1 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#info-and-relationships

Genel Tanım

WCAG SC 1.3.1, sunum yoluyla iletilen bilgi, yapı ve ilişkilerin programatik olarak belirlenebilmesini veya metin olarak mevcut olmasını gerektirir. Bu, ekran okuyucular, metinden sese dönüştürme veya özel stil sayfası uzantıları gibi yardımcı teknolojileri kullananlar da dahil olmak üzere tüm kullanıcıların içeriğe erişebilmesini sağlar.

Oluşturduğumuz web sitesi içeriğinin bir kısmı, görme yetisine sahip çoğu kullanıcı tarafından görsel olarak algılanabilir. Bununla birlikte, görme engelliler gibi engelli kullanıcılar aynı içeriği çeşitli yöntemler ve sunumlar aracılığıyla farklı şekilde algılarlar.

Sayfa yapısını hızlıca anlayalım ve tüm sunum modlarına nasıl uyarlayamayacağımızı görelim: Sayfa çoğunlukla üç dille oluşturulur:
HTML, CSS ve JavaScript.
HTML, <h1> gibi belirli etiketlerle temsil edilen başlıklar ve alt başlıklar gibi belgenin yapısından ve etiketlerinden sorumludur. HTML'nin kendisinde tasarım olmadığı için CSS, HTML'ye tasarım uygulamaktan sorumludur.

Örneğin, <h1> başlığımızın boyutunu artırmak için CSS kullanıyoruz. Birçok web sitesi yazarı ve geliştiricisi HTML işaretlemesini yanlış kullanabilir ve CSS ile geçersiz kılabilir, böylece öğelerin görünürlüğü görme yetisine sahip kullanıcılar için mantıklı hale gelir. Ancak, ekran okuyucular gibi yardımcı teknolojilere güvenen engelli kullanıcılar, CSS ile değil, yalnızca HTML etiketleri ve yapısıyla etkileşim kurarlar.

HTML etiketi, CSS değişiklikleri nedeniyle nihai sonuçtan farklı olduğunda, ekran okuyucular yalnızca belgede yazılı olan HTML'yi yorumlar. Sonuç olarak, görme engelli ve gören kullanıcılar aynı içeriği farklı şekilde algılayabilir.

Örneğin, HTML'de <h1> etiketi bir başlığı temsil ediyorsa, bazı web sitesi yazarları <p> gibi farklı bir etiket kullanabilir ancak bunu CSS ile bir başlığa benzeyecek şekilde biçimlendirebilirler. Görme engeli olmayan kullanıcılar bunu bir başlık olarak algılarken, görme engelli kullanıcıların ekran okuyucuları bunu bir paragraf olarak yorumlar.

Web sitesi yazarları olarak, içeriğin tüm yöntem ve sunumlarda evrensel olarak aynı şekilde algılanmasını sağlamak için gerekli tüm çabayı göstermeliyiz.

Faydalar

• Geliştirilmiş Erişilebilirlik: Görme engelli veya bilişsel engelli kullanıcıların içeriği anlayabilmelerini ve içerikte gezinmelerini sağlar.
• Tutarlı Kullanıcı Deneyimi: Farklı cihazlar ve yardımcı teknolojiler arasında tutarlı ve öngörülebilir bir kullanıcı deneyimi oluşturmaya yardımcı olur.

Ana Amaç

Görsel sunumu, altta yatan bilgi, yapı ve ilişkilerden ayırmak ve sunum formatı değiştiğinde bunların programatik olarak erişilebilir ve korunmuş olmasını sağlamak.

En İyi Uygulamalar

• Vurgu: Metni yalnızca CSS ile biçimlendirmek yerine, vurgu için <em> ve <strong> etiketlerini kullanın.
• Başlıklar: Sayfanızda yalnızca bir <h1> etiketi kullanın ve içeriği yapılandırmak için mantıklı bir başlık hiyerarşisi kullanın.
• Tablolar: HTML tablo işaretlemesini uygun başlıklarla kullanın. Mümkün olduğunca iç içe tablolardan kaçının. Doğru tablo işaretlemesini ( <table>, <thead>, <tbody>, <th>, <td>) kullanın ve satır ve sütun başlıklarını ekleyin.
• Yerleşim Tabloları: Tablonuz yalnızca yerleşim düzeni içinse, tablo başlıkları gibi veriler arasında ilişki kuran özel tablo bölümlerini kullanmayın. Bu, ekran okuyucuların tablo hücrelerinin içinde veri olmadığını anlamasına yardımcı olur.

Formlar: Tüm form öğelerinin programatik olarak ilişkilendirilmiş etiketlere sahip olduğundan emin olun. İlgili form denetimlerini <fieldset> ve <legend> kullanarak veya özel denetimler için ARIA rolleri kullanarak gruplandırın.

Listeler: Liste öğelerinizin (<li>) doğrudan üst öğesi olarak <ol> veya <ul> kullanın.

Anlamsal İşaretleme: Yerel HTML anlamsal öğelerine öncelik verin ve ARIA rollerini az kullanın.

Etiketler ve Form Denetimleri Bağlantısı: Yardımcı teknolojiler için aralarındaki ilişkiyi netleştirmek amacıyla <label> öğesinde "for" özniteliğini kullanarak etiketlerin ve form denetimlerinin doğru şekilde bağlantılı olduğundan emin olun ve bunu form denetiminin "id"siyle ilişkilendirin.

Örnekler ve Açıklamalar

Örnek 1: Form öğelerinin kullanımı

Nelerden Kaçınılmalı?

HTML/CSS

<div >
  <p> Kullanıcı Bilgileri </p>​
  <label for = "username" > Kullanıcı Adı: </label>
  <input type = "text" id = "username" name = "username" >
  <label for = "email" >E - posta: </label>
  <input type = "email" id = "email" name = "email" >
</div>

Açıklama: Hatalı uygulama, ilgili öğeleri gruplandırmak için <fieldset> yerine <div> kullanıyor, grup başlığı olarak <legend> öğesini içermiyor ve <label> öğesini kullanmadan etiketleri doğrudan giriş alanlarıyla ilişkilendiriyor.

Ne Yapılmalı?

HTML/CSS

<form>
  <fieldset>
    <legend> Kullanıcı Bilgileri </legend>​
    <label for = "username" > Kullanıcı Adı: </label>
    <input type = "text" id = "username" name = "username" >
    <label for = "email" >E - posta: </label>
    <input type = "email" id = "email" name = "email" >
  </fieldset>​​
</form>​​

Açıklama: Doğru uygulama, ilgili öğeleri gruplandırmak için <fieldset>, grup başlığı olarak <legend> ve etiketleri giriş alanlarıyla ilişkilendirmek için <label> kullanır. Bu, anlamsal yapıyı ve erişilebilirliği sağlayarak kullanıcı deneyimini iyileştirir ve formda gezinmeyi kolaylaştırır.

Örnek 2: Tablo öğelerinin kullanımı

Nelerden Kaçınılmalı?

HTML/CSS

<tablo>
  <tr>​​
    <td> İletişim Bilgileri </td>​
  </tr>​​
  <tr>​​
    <td >John</td >
    <td> Doe </td>​​
    <td>john.doe@example.com</td>
  </tr>​​
</tablo>​​

Açıklama: Anlamsal yapı eksikliği: Bu örnekte, tabloda sütun başlıklarını tanımlamak için tipik olarak kullanılan <thead> öğesi eksiktir. Bunun yerine, anlamsal olarak başlık olarak işaretlenmemiş "İletişim Bilgileri" yazan bir satır bulunmaktadır.

Ne Yapılmalı?

HTML/CSS

<tablo>
  <thead>​​
    <tr>​​
      <th> Adınız </th>​​
      <th> Soyadı </th>​​
      <th> E - posta </th>
    </tr>​​
  </thead>​​
  <tbody>​​
    <tr>​​
      <td >John</td >
      <td> Doe </td>​​
      <td >john.doe@example.com</td >
    </tr>​​
  </tbody>​​
</table>​​

Açıklama: Doğru uygulamada, tablo sütun başlıklarını tanımlamak için <thead> etiketini içerir ve bu da verilere net bir yapı kazandırır. Her satır uygun şekilde <tr> etiketiyle işaretlenir ve veri hücreleri <td> etiketiyle belirtilir. Bu, erişilebilirliği artırır ve tablonun yardımcı teknolojiler tarafından doğru şekilde yorumlanmasını sağlar.

Örnek 3: CSS ile Stil Oluşturma

Nelerden Kaçınılmalı?

HTML/CSS

<div style = "font-size: 24px; font-weight: bold;" > Bölüm 1: Cebire Giriş </div>

Bu bölüm cebirin temel konularını kapsamaktadır ...

Açıklama: Yanlış örnekte, başlık yanlış bir öğe tarafından kullanılmış <div> ve CSS ile başlık gibi görünecek şekilde biçimlendirilmiştir. Bilişsel engeli olan kullanıcılar, bir sayfanın CSS'sini devre dışı bırakmak için tarayıcı uzantıları kullanma eğilimindedir. Yukarıdaki senaryoda bu gerçekleşirse, başlık düz metin olarak görünecektir. Sonuç olarak, çoğu kullanıcı tarafından kolayca algılanan aynı içerik, bu tür uzantıları veya yardımcı teknolojileri kullanan kullanıcılar tarafından aynı şekilde yorumlanmayabilir.

Ne Yapılmalı?

HTML/CSS

<h1 style = "font-size: 24px; font-weight: bold;" > Bölüm 1: Cebire Giriş </h1>

Bu bölüm cebirin temel konularını kapsamaktadır ...

Açıklama: Doğru uygulamada, başlık <h1> öğesi kullanılarak işaretlenir ve bu da anlamsal doğruluğu sağlar. CSS stillendirme için kullanılmaya devam etse de, CSS devre dışı bırakılsa bile başlığın yapısal bütünlüğü korunur. Bu yaklaşım, bilişsel engelliler veya CSS'yi devre dışı bırakmak için tarayıcı uzantıları kullananlar da dahil olmak üzere kullanıcıların içeriği doğru bir şekilde yorumlayabilmelerini sağlar, çünkü başlık stillendirmeden bağımsız olarak önemini ve yapısını korur.