Düzen Tabloları Bir Tuzaktır

Yıllar önce geliştiriciler sayfa yerleşimlerini table öğesiyle oluştururdu. Bu alışkanlık eski kodlarda varlığını sürdürüyor ve bugün hâlâ ciddi erişilebilirlik sorunlarına yol açıyor.

Bir ekran okuyucu her tabloyu veri tablosu olarak değerlendirir. Yerleşiminiz için satırları, sütunları ve hücre sayılarını duyurarak kullanıcıları anlamsız bir yapıyla boğar.

Yerleşim tabloları çoğu zaman içeriği hücrelere kafa karıştırıcı bir sırayla dağıtır. Görsel sıra ile okuma sırası birbirinden uzaklaşır ve kullanıcılar ne yapacağını şaşırır.

Modern yerleşim CSS'e aittir. Bir sayfayı düzenlemek için flexbox veya grid kullanın ve table öğesini yalnızca gerçek tablo verileri için ayırın.

Ögeleri bir satır veya sütun boyunca sıralarken flexbox doğal seçimdir. Tablo anlamlandırmasının araya girmesine gerek kalmadan içeriğe uyum sağlar.

Hem satırlar hem de sütunlar söz konusu olduğunda CSS grid gerçek bir yerleşim sistemi sunar. Sayfanın görünümünü işaretlemesinin anlamından ayırır.

CSS yerleşimi sayesinde HTML kodunuz header, nav ve main gibi gerçek bölgelere sahip olabilir. Ekran okuyucu kullanıcıları hücre sayıları yerine anlamlı bir harita edinir.

Eski bir yerleşim tablosunu gerçekten kaldıramıyorsanız role=presentation ekleyin. Bu, tablo anlamlandırmasını kaldırarak yardımcı teknolojilerin ızgarayı yok saymasını sağlar.

role=presentation kullanımını geçici bir yara bandı olarak görün. Asıl çözüm, sorunu yalnızca gizlemek yerine ortadan kaldıran CSS'e geçiş yapmaktır.

Caption bulunmaması, th kullanılmaması ve hücrelerin değerler yerine bütün bölümleri barındırması uyarı işaretleridir. Bu yapı neredeyse her zaman yeniden düzenlenmesi gereken bir yerleşim tablosuna işaret eder.

Her tablo için basit bir soru sorun: İlişkili değerleri satır ve sütunlarla sunuyor mu? Sunmuyorsa bu bir yerleşim tablosudur ve CSS ile değiştirilmelidir.

İçerik sütunlarını yalnızca konumlandırmak için tablo kullanan bir sayfayı devraldınız.

Bir sayfayı hiçbir zaman table ile yerleştirmeyin. flexbox veya grid kullanın, table öğesini gerçek veriler için ayırın ve role=presentation kullanımını eski kodlarda yalnızca geçici bir çözüm olarak değerlendirin.