ADA Kapsamında Başlıklar, Listeler, Tablolar ve Etiketler

Ekranın gösterdiğini kod da söylemeli

Bir klinik randevu sayfasında gören ziyaretçi büyük, kalın bir satırı görünce yeni bir bölüm başladığını anlar. Girintili üç satırı görünce bunun liste olduğunu anlar. Saatlerden oluşan bir ızgarayı görünce soldaki sütunun gün olduğunu anlar. Ekran okuyucu kullanıcısı işaretleme söylemedikçe bunların hiçbirini alamaz.

WCAG 1.3.1 (A seviyesi), sunum yoluyla aktarılan bilgi, yapı ve ilişkilerin programatik olarak belirlenebilmesini ya da metin olarak sunulmasını ister. Amaç, görsel düzen konuşma, braille veya kullanıcı stil sayfasıyla değiştirildiğinde anlamın korunmasıdır. Teknoloji gerçek işaretlemeyi destekliyorsa yapıyı bir cümleyle anlatmak yerine onu kullanın.

Yalnızca renk başka bir ölçütte, 1.4.1'de ele alınır; bu ölçüt yapı ve ilişkilerle ilgilidir.

Çoğu zaman yalnızca bir şeye benzeyen beş öğe

• Başlıklar: CSS ile büyütülmüş ama paragraf veya div olarak kodlanmış metin.
• Listeler: madde imi veya tire ile başlayan, satır sonlarıyla ayrılmış satırlar.
• Tablolar: div'lerden kurulmuş ızgara ya da başlık hücresi ve başlığı olmayan gerçek tablo.
• Etiketler ve gruplar: girdinin yanında duran ama programatik bağı olmayan metin ya da grup adı olmayan, soruyla ayrı duran radyo düğmeleri.
• Durum ve anlam: zorunlu için kırmızı yıldız, geçerli sayfa için kalın yazı, seçili satır için vurgu.

Hizmet sayfalarındaki formlar ve ücret tabloları

Kamu siteleri formlardan ve tablolardan oluşur: klinik randevu talebi, ruhsat ücret tarifesi, otobüs saatleri, numaralı maddeleri olan gündem. ABD Adalet Bakanlığı'nın (DOJ) yaygın engeller listesi, etiketsiz alanlar dahil erişilemeyen formları sayar; etiketsiz alan pratikte bu ölçütün ihlalidir. div'lerden kurulu bir ücret tablosu, hangi tutarın hangi hizmete ait olduğuna dair ipucu vermeyen bir tutar dizisi olarak okunur; paragraflardan kurulu bir gündem kaç madde olduğunu gizler.

Sayfa oluşturucu bileşenlerine dayanan kurumlar, "görünüm" ile "yapı"nın farklı yerlerde belirlendiğini sık sık keşfeder. Şablon yanlış öğeyi üretiyorsa onu kullanan her sayfa sorunu devralır. Bunun öteki yinelenen sorunlarla ilişkisi için yaygın engeller sayfasına bakın.

Web örnekleri: randevular, saat çizelgeleri ve gündemler

Her alana programatik olarak bağlı bir etiket verin; ilişkili radyo düğmelerini adı olan bir grupta toplayın.

<div class="alan">Tercih edilen klinik</div>
<input type="text" name="klinik">

<div class="alan">Ziyaret türü</div>
<input type="radio" name="zt" value="yeni"> Yeni hasta
<input type="radio" name="zt" value="kontrol"> Kontrol

<label for="klinik">Tercih edilen klinik</label>
<input id="klinik" name="klinik" type="text">

<fieldset>
  <legend>Ziyaret türü</legend>
  <label><input type="radio" name="zt" value="yeni"> Yeni hasta</label>
  <label><input type="radio" name="zt" value="kontrol"> Kontrol</label>
</fieldset>

Sefer çizelgesi bir tablodur. Başlık hücreleri, bir değerin durak mı kalkış saati mi olduğunu söyler.

<div class="satir">
  <span>Durak</span><span>12 No'lu Hat</span><span>40 No'lu Hat</span>
</div>
<div class="satir">
  <span>Kütüphane</span><span>8.10</span><span>8.25</span>
</div>

<table>
  <caption>Cumhuriyet Caddesi hafta içi kalkışlar</caption>
  <thead>
    <tr><th scope="col">Durak</th>
        <th scope="col">12 No'lu Hat</th>
        <th scope="col">40 No'lu Hat</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Kütüphane</th><td>8.10</td><td>8.25</td></tr>
  </tbody>
</table>

Başlıklar ve listeler, ekran okuyucu kullanıcılarının gezindiği taslağı taşır.

<p class="buyuk kalin">Gündem</p>
<p>1. Açılış<br>
2. Halk yorumları<br>
3. Otopark yönetmeliği</p>

<h2>Gündem</h2>
<ol>
  <li>Açılış</li>
  <li>Halk yorumları</li>
  <li>Otopark yönetmeliği</li>
</ol>

Yerel uygulamalarda: başlıklar ve gruplar

Yerel araç setlerinde aynı fikir başka adlarla vardır. Büyük bir başlık metni, başlık olarak işaretlemedikçe başlık değildir.

Text("Su faturası")
    .font(.title)

Text("Su faturası")
    .font(.title)
    .accessibilityAddTraits(.isHeader)

Text(
    "Su faturası",
    style = MaterialTheme.typography.headlineMedium
)

Text(
    "Su faturası",
    style = MaterialTheme.typography.headlineMedium,
    modifier = Modifier.semantics { heading() }
)

Nasıl kontrol edilir?

1. Sayfanın CSS'ini kapatın (veya okuma kipini kullanın). Yapı hâlâ başlık, liste ve tablo olarak okunuyor mu?
2. Ekran okuyucuyla başlık listesini, bölge listesini ve form alanları listesini açın. Her biri kendi başına anlamlı olmalı.
3. Bir tablo hücresine girin. Ekran okuyucu satır ve sütun başlıklarını duyurmalı.
4. Bir radyo düğmesi grubuna Tab ile girin. Seçenekten önce grubun adı okunmalı.
5. Öğeleri inceleyin. Başlığa benzeyen şeyin etiketi div ise başarısızdır.

Otomatik araçlar etiketsiz girdileri ve boş başlıkları bulur; kalın bir paragrafın kılık değiştirmiş başlık olduğunu söyleyemez.

Bırakılması gereken hatalar

• Veri için kullanılan düzen tabloları ve tablo yerine kullanılan div ızgaraları.
• Başlık düzeylerini atlamak ya da düzeyi taslaktaki yeri yerine boyutuna göre seçmek.
• Tek etiket olarak yer tutucu metin.
• Karakter olarak yazılmış madde imleri.
• "Zorunlu" bilgisini etiket metninde bulunmayan renkli bir yıldızla vermek.

Şu durumda yayına alın

• Görsel olarak başlık, liste, tablo ve form grubu görünen her şey öyle kodlanmış.
• Her form alanının programatik bir etiketi var.
• Görsel olarak gösterilen durum (zorunlu, geçerli, seçili) metin veya özniteliklerle de sunuluyor.

Kaynaklar

• Understanding SC 1.3.1: Info and Relationships (W3C), İngilizce, yeni sekmede açılır
• H39: Using caption elements to associate data table captions with data tables (W3C), İngilizce, yeni sekmede açılır
• H71: Providing a description for groups of form controls using fieldset and legend elements (W3C), İngilizce, yeni sekmede açılır
• H43: Using id and headers attributes to associate data cells with header cells in data tables (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.