Otomatik Kayan Carousel ve Akordeonların Kullanılabilirlik Maliyeti

Otomatik geçen bir carousel, beşinci slaydını pratikte kimseye göstermez. Kapalı bir akordeon panelindeki metin de tarayıcının sayfa içi aramasına çoğu zaman takılmaz. İkisi de tasarım sunumunda iyi fikir gibi durur, sayaçlara bakınca fikir dağılır. Kullanıcı kontrolünü geri vermek ise genelde birkaç satırlık bir düzeltme.

Geçiş hızını kim belirliyor?

Otomatik carousel'de süreyi tasarımcı seçer, okuyan kişi değil. Beş saniye, başlığı okuyup teklifi anlayan biri için yeterli; aynı metni yavaş okuyan, ekran büyüteci kullanan ya da siteyi ana dili olmayan bir dilde gezen biri için değil. Üstelik çevresel görüşteki hareket dikkati kendine çeker: kullanıcı gövde metnini okumaya çalışırken sayfanın üstündeki kayan alan sürekli araya girer.

Banner körlüğü de buna eklenir. Yalnız burada kaynak metinlerde sık tekrarlanan bir hata var: sorun sayfanın sağ tarafı değil, kutunun reklama benzemesi. Renkli çerçeve, otomatik hareket, kampanya dili ve “Rewarding.Life.Style” gibi hiçbir şey söylemeyen başlıklar, o alanı nerede durursa dursun reklam kategorisine sokar. Sol sütuna taşımak kutuyu görünür yapmaz, kutuyu içerik gibi göstermek yapar.

Beşinci slaydı kim görüyor?

Basit bir hesap: beş slaytlık ve beş saniye aralıklı bir carousel'de tam tur 25 saniye sürer, son slayt ancak 20. saniyede ekrana gelir. Bir ziyaretçinin, sayfa açıldıktan sonra 20 saniye boyunca hem sayfada kalıp hem de bakışını tam o alanda tutması gerekiyor demektir. Kaydırıp aşağı indiyse zaten bitti.

Ölçülmüş hali de var. Erik Runyon, Notre Dame ana sayfasında carousel etkileşimini sayarak ziyaretçilerin yaklaşık %1'inin carousel'e tıkladığını, tıklayanların da %84'ünün ilk slaytı seçtiğini yayımladı. Yani slayt eklemek mesaj sayısını artırmıyor, ilk mesajın payını bölüyor. Beş slaytlık bir carousel kurmak, dört mesajı görünmez etmenin en zahmetli yolu.

Beş saniye WCAG'de de bir eşik

Bu bir zevk meselesi değil, denetlenebilir bir kural. WCAG'in 2.2.2 Pause, Stop, Hide ölçütü (A seviyesi) şunu söyler: kendiliğinden başlayan, beş saniyeden uzun süren ve sayfadaki diğer içerikle birlikte gösterilen hareketli bir öğe varsa, kullanıcının onu durdurabilmesi ya da gizleyebilmesi gerekir. Otomatik carousel'lerin neredeyse tamamı bu tanıma girer ve büyük kısmı bir duraklat düğmesi sunmaz.

İşin kolay tarafı, durdurma düğmesi koymak yerine otomatik geçişi hiç açmamak kuralı da sağlar. Bir de prefers-reduced-motion sorgusunu ekleyip hareket azaltma ayarı açık olan kullanıcıya geçişi kapatmak var; iki satırlık CSS, tarayıcı desteği yıllardır yerinde.

Akordeonun görünmeyen kısmı

Akordeon, uzun sayfayı kısaltır ama içeriği ortadan kaldırmaz; sadece gizler. display:none ile gizlenmiş metni tarayıcının Ctrl+F araması bulamaz. Kullanıcı, sayfada olduğunu bildiği bir cümleyi arar, sonuç çıkmaz ve sayfada olmadığı sonucuna varır. Aynı sorun bağlantı verirken de çıkar: kapalı bir panelin içindeki başlığa çapa verirsen, gelen kişi boş bir sayfaya düşer.

Bir akordeon için sayfaya üçüncü parti bir bileşen kütüphanesi kurmam. <details> ve <summary> tarayıcıda hazır geliyor; klavye ile açılıp kapanması, ekran okuyucuya durumunu bildirmesi ve Chrome'da sayfa içi arama kapalı paneli açması sıfır JavaScript ile geliyor. Kendi div'lerinle yazdığın akordeonda bunların hepsini elle üretmen gerekir ve pratikte çoğu proje bunu üretmez.

Yerine ne koymalı

• Otomatik geçişi kapat. Ok tuşları, noktalar ve kaydırma kalsın, hareketi kullanıcı başlatsın.
• Tek bir asıl mesajı statik olarak göster. İkinci ve üçüncü mesaj için carousel değil, sayfada aşağıya doğru ayrı bloklar kullan.
• Bağlantı ve panel başlıklarını içeriğin kendisiyle yaz: “Kargo ücreti ve teslim süresi”, “Detaylar” değil.
• Akordeonda arama, çapa ve yazdırma senaryolarını dene. Panel açıkken çalışıp kapalıyken çalışmayan her şey hata sayılır.
• Uygulamayı bitirdikten sonra W3C WAI kaynaklarındaki ilgili ölçütlerle karşılaştır; carousel'de en çok 2.2.2 ve klavye erişimi takılır.