Vanilla JavaScript ve ARIA ile Erişilebilir Etkileşimli Veri Tablolarını Ustalıkla Kullanma

Veri tabloları HTML'deki en anlamlı ve güçlü öğelerden biridir; ancak geliştiriciler onları etkileşimle zenginleştirmeye çalıştığında sıklıkla yanlış kullanılırlar veya erişilebilirlik özelliklerinden yoksun bırakılırlar. Orta ve ileri düzey ön yüz geliştiricileri için meydan okuma, sadece bir tabloyu iyi göstermek değil, sıralama, filtreleme ve sayfalama gibi karmaşık etkileşimlerin, yardımcı teknolojilere güvenen kullanıcılar da dahil olmak üzere herkes tarafından algılanabilir ve kullanılabilir olmasını sağlamaktır. Bu kılavuz, statik HTML ile dinamik kullanıcı arayüzleri arasındaki boşluğu doldurmak için WAI-ARIA (Web Erişilebilirlik Girişimi – Erişilebilir Zengin İnternet Uygulamaları) standartlarından yararlanarak, saf JavaScript kullanarak sağlam etkileşimli veri tablolarının nasıl uygulanacağını inceler.

Temel: Anlamsal HTML Pazarlık Konusu Değildir

Tek bir satır JavaScript yazmadan önce, HTML yapınız sağlam olmalıdır. Ekran okuyucular, verilerin bağlamını anlamak için anlamsal işaretlere güvenir. Temel bir veri tablosu her zaman bir ``, ``, `` ve `` (uygulandığı durumlarda) içermelidir. `` çok önemlidir çünkü tablo içeriğinin bir özetini sağlar ve ekran okuyucular tablo bölgesine girildiğinde bunu hemen duyurur. Ayrıca, uygun `scope` öznitelikleriyle `` öğelerini her zaman kullanın. `scope="col"` veya `scope="row"` ayarlamak, başlık hücrelerini karşılık gelen veri hücrelerine açıkça bağlar ve klavye veya sesli komutlar aracılığıyla gezinen kullanıcılar için belirsizliği ortadan kaldırır.

Vanilla JavaScript ile Etkileşim Ekleme

Modern kullanıcılar veri tablolarının dinamik olmasını bekler. Sayfa yeniden yüklenmeden sütunları sıralamak, satırları filtrelemek ve sonuçları sayfalama istiyorlar. React veya Vue gibi kütüphaneler bunu basitleştirse de, saf JavaScript eşsiz bir kontrol ve sıfır bağımlılık sunar. Sıralamayı uygulamak için başlık hücrelerinize olay dinleyicileri eklemeniz gerekir. Bir başlığa tıklandığında, karşılık gelen sütundaki verileri toplarsınız, sıralarsınız ve ardından ``'yi yeniden oluşturursunuz. Ancak DOM'u değiştirmek erişilebilirlik için yeterli değildir. Yeni sıralama düzenini yansıtacak şekilde başlıkların durumunu güncellemeniz gerekir.

ARIA ile Sıralama Durumunu Yönetme

Bir kullanıcı bir sütun başlığına tıklayarak sıralama yaptığında, o başlıktaki `aria-sort` özniteliğini güncellemelisiniz. Bu öznitelik `ascending` (artan), `descending` (azalan), `none` (yok) veya `other` (diğer) değerlerini alabilir. Bu, ekran okuyucularının "Sütun Adı, azalan sıralı" şeklinde duyuru yapmasını sağlar ve kullanıcıya kritik geri bildirim sunar. ARIA kullanarak sıralama düzenini değiştirmek için bir tıklama olayını nasıl işleyeceğinize dair pratik bir örnek:

const headers = document.querySelectorAll('table th[data-sortable]');

headers.forEach(header => {
  header.addEventListener('click', () => {
    const direction = header.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
    
    // Diğer başlıklardan 'sıralı' durumunu kaldır
    headers.forEach(h => h.setAttribute('aria-sort', 'none'));
    
    // Yeni durumu ayarla
    header.setAttribute('aria-sort', direction);
    
    // Sıralama mantığını burada tetikle
    sortTable(header, direction);
  });
});

Dinamik İçerik Değişikliklerini Yönetme

Erişilebilir JavaScript'teki en yaygın hatalardan biri, ekran okuyucu kullanıcılarına yapılan değişiklikleri duyurmamaktır. Bir tabloyu filtrelerseniz veya bir sonraki sayfaya geçerseniz, DOM değişir ancak ekran okuyucu kullanıcısı içeriğin güncellenmediğini fark etmeyebilir. Bunu çözmek için `aria-live` bölgesini kullanın. Görsel olarak gizlenmiş, canlı bir bölge olarak hizmet veren ayrı bir öğe oluşturun. JavaScript tablo içeriğini güncellediğinde, bu bölgeyi de kısa bir mesajla güncelleyin.

<div id="table-status" aria-live="polite" class="sr-only"></div>

<script>
function updateTableContent(filteredRows) {
  // 1. tbody'yi güncelle
  tbody.innerHTML = '';
  filteredRows.forEach(row => tbody.appendChild(row));

  // 2. Ekran okuyucularına değişikliği duyur
  const statusRegion = document.getElementById('table-status');
  statusRegion.textContent = `Tablo güncellendi. ${filteredRows.length} sonuç gösteriliyor.`;
  
  // Dağınıklığı önlemek için mesajı bir gecikmeden sonra temizle
  setTimeout(() => { statusRegion.textContent = ''; }, 1000);
}
</script>

`aria-live="polite"` özniteliği, duyurunun kullanıcının mevcut görevini tamamlamasından sonra gerçekleşmesini sağlar ve kesintileri önler; `aria-live="assertive"` ise hemen kesinti yapar (az kullanın).

Sayfalama ve Gezinme

Sayfalama uygularken, her sayfa bağlantısının net bir şekilde etiketlendiğinden emin olun. Bağlam olmadan "Sonraki" veya "1" gibi genel metinlerden kaçının. Bunun yerine, eylemi tanımlamak için `aria-label` kullanın, örneğin `aria-label="2. sayfaya git"` veya `aria-label="Sonraki sayfaya git"`. Bu, genel bağlantıların eksik olduğu bir bağlam sağlar. Ayrıca, klavye gezginleri için net bir işaret oluşturmak amacıyla sayfalama kontrollerini "Sayfalama" `aria-label`'ına sahip bir `