Erişilebilir CSS Spinner Oluşturucu

Oluşturulan CSS neyi kapsar, neyi kapsamaz

Araç görsel kısmı verir: çerçeveli bir daire ve bir dönüş. Yalnızca görsel olan bir yükleme göstergesi, öğe boş olduğu için yardımcı teknolojiler için bir anlam taşımaz. Erişilebilirliği, işaretleme ve bunun etrafına eklediğiniz tek bir ek CSS kuralı sağlar.

Durumu duyuran işaretleme

<div class="loader" role="status" aria-label="Sonuçlar yükleniyor"></div>

role="status" öğeyi bir canlı bölge olarak işaretler; bu sayede birçok ekran okuyucu, öğe belirdiğinde etiketini okur. aria-label genel bir kelime yerine neyin yüklendiğini söylemelidir, örneğin “Sonuçlar yükleniyor” veya “Kaydediliyor”. İş bittiğinde öğeyi kaldırın ve yeni içeriği gösterin.

Halkanın yanına görünür bir metin de koyabilirsiniz. Görünür metin, hareketi iyi göremeyen kişiler de dahil herkese yardımcı olur.

Azaltılmış harekete saygı gösterin

Bazı ziyaretçiler, sitelerden animasyonları sınırlamasını isteyen bir sistem ayarını açar. Bunu, oluşturulan CSS’in arkasına koyduğunuz bir medya sorgusuyla karşılayın:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Bu kural dönüşü kaldırmak yerine yavaşlatır; böylece gösterge hızlı hareket etmeden canlı görünmeye devam eder. Statik bir sinyal tercih ederseniz animation: none; kullanın ve halkanın yanında “Yükleniyor” metnini gösterin.

Kontrast ve boyut kontrol listesi

Sınırlar

• Oluşturucu iz rengini (#eee) sizin için seçer. Sayfa arka planınız buna yakınsa bunu kopyaladığınız CSS’te düzenleyin.
• Çok hızlı bir hız değeri halkanın titremesine neden olur. Yaklaşık 0,5 saniyenin altındaki değerlerden kaçının.
• Uzun beklemelerde yalnızca spinner’a güvenmeyin. Neler olduğunu metinle bildirin.

Hızlıca test edin

İşletim sisteminizde azaltılmış hareket seçeneğini açın ve sayfayı yenileyin: halka daha yavaş dönmelidir. Ardından klavyeyle sayfada gezinerek spinner’ın ziyaretçinin kullandığı kontrolden odağı hiçbir zaman almadığını doğrulayın. Son olarak bir ekran okuyucu açın ve yükleme durumunu bir kez tetikleyin; etiketin öğe belirdiğinde okunup okunmadığını ve yeni içeriğe daha sonra erişilip erişilemediğini duyun.