Saf JavaScript ve WAI-ARIA ile Erişilebilir Sürükle-Bırak Arayüzleri Oluşturma

Sürükle-bırak arayüzleri, modern web uygulamalarının vazgeçilmez bir parçası haline gelmiştir ve kullanıcıların listeleri yeniden sıralamasına, dosyaları taşımasına veya iş akışlarını yönetmesine sezgisel bir yol sunar. Ancak, ön uç geliştirmede yaygın bir hata, klavye erişilebilirliğinden önce fare etkileşimlerini önceliklendirmektir. Ekran okuyuculara veya yalnızca klavye gezintisine güvenen kullanıcılar için standart bir sürükle-bırak uygulaması genellikle bir giriş engeli oluşturur. Bu yazı, uygulamanızın herkes tarafından kullanılabilir olmasını sağlayarak, yalnızca Saf JavaScript ve WAI-ARIA standartlarını kullanarak sağlam ve erişilebilir sürükle-bırak işlevselliğini nasıl uygulayacağınızı inceler.

Sürükle-Bırakta Klavye Erişilebilirliğinin Önemi

Geleneksel sürükle-bırak işlemi, fare olay API'sine (mousedown, mousemove, mouseup) yoğun bir şekilde dayanır. Bu, fare kullanıcıları için iyi çalışsa da, klavye kullanıcılarını tamamen dışarıda bırakır. WCAG 2.1 kılavuzlarına göre, bir fare arayüzü aracılığıyla mevcut olan tüm işlevler klavye aracılığıyla da mevcut olmalıdır. Bu, yerel sürükleme işlemini mümkün olduğunda desteklememizi, ancak kritik olarak, kullanıcıların ok tuşları ve Enter/Boşluk tuşlarını kullanarak öğeleri hareket ettirebilmesini sağlayan alternatif bir "klavye modu" sağlamamızı gerektirir.

Temel WAI-ARIA Roller ve Durumları

Etkileşimli öğelerimizin durumunu yardımcı teknolojilere iletmek için belirli WAI-ARIA rollerini kullanmamız gerekir. En yaygın desen, kapsayıcı için role="listbox" ve sürüklenebilir öğeler için role="option" kullanmayı içerir. Ayrıca aşağıdaki öznitelikler kullanarak durumu dinamik olarak yönetmemiz gerekir:

• aria-grabbed: Bir öğenin sürüklenebilir (true) olup olmadığını belirtir.
• aria-dropeffect: Öğenin bırakıldığında hangi eylemin gerçekleşeceğini belirtir (örn. "move", "copy").
• aria-activedescendant: Listbox içindeki şu anda odaklanmış veya "aktif" seçeneğe işaret eder, ekran okuyucuların konumu takip etmesine yardımcı olur.

Erişilebilir Sürükle-Bırak Mantığının Uygulanması

Aşağıda, bir liste yeniden sıralama mekanizmasının basitleştirilmiş bir uygulaması yer almaktadır. Bu örnek, erişilebilirliğin en çok göz ardı edilen yönü olan klavye etkileşim mantığına odaklanmaktadır.

const listContainer = document.getElementById('item-list');
const items = Array.from(listContainer.querySelectorAll('[role="option"]'));

// Odak yönetimi yardımcı işlevi
let currentIndex = 0;

function moveItem(direction) {
  const current = items[currentIndex];
  
  // Yön ('up' veya 'down') bazında hedef dizini belirleyin
  const newIndex = direction === 'up' 
    ? currentIndex - 1 
    : currentIndex + 1;

  // Sınır kontrolleri
  if (newIndex < 0 || newIndex >= items.length) return;

  const target = items[newIndex];

  // DOM'daki öğeleri değiştirin
  if (direction === 'up') {
    listContainer.insertBefore(current, target);
  } else {
    listContainer.insertBefore(target, current);
  }

  // DOM değişikliklerini yansıtacak şekilde dizi sırasını güncelleyin
  const tempItems = Array.from(listContainer.querySelectorAll('[role="option"]'));
  const oldIndex = items.indexOf(current);
  items.splice(oldIndex, 1);
  items.splice(newIndex, 0, current);

  // Odak, yeni konumlandırılan öğeye taşınır
  target.focus();
  listContainer.setAttribute('aria-activedescendant', target.id);
  
  // Ekran okuyucuya değişikliği duyurun
  current.setAttribute('aria-label', `Taşındı ${direction}`);
}

// Klavye gezintisi için olay dinleyicisi
listContainer.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    e.preventDefault();
    moveItem('up');
  } else if (e.key === 'ArrowDown') {
    e.preventDefault();
    moveItem('down');
  }
});

Fare Deneyiminin Geliştirilmesi

Yukarıdaki kod klavye gezintisini ele alırken, eksiksiz bir çözüm fare sürükleme işlemini de desteklemelidir. Bunun için HTML5 Sürükle ve Bırak API'sini veya SortableJS gibi bir kütüphaneyi (erişilebilirlik için yapılandırılmış) kullanabilirsiniz. Kritik nokta, bir öğe fare ile alındığında aria-grabbed durumunun true olarak güncellenmesini ve bırakıldığında false değerine dönmesini sağlamaktır.