Erişilebilirlik

Erişilebilirlik varsayılan olarak açık; eklenecek bir modül yok.

Slider'ın sizin için yaptıkları

• Roller: görüntü alanı aria-roledescription="carousel" ve sizin label değerinizle (veya elemanın aria-label'ı) bir region; her slayt aria-roledescription="slide" ve "Slayt 3 / 8" ile bir group.
• Yalnızca görünen slaytlara ulaşılır: ekran dışındaki slaytlar inert ve aria-hidden alır; klavye ve ekran okuyucu kullanıcıları gizli bir slayta düşmez.
• Duyurular: kullanıcı slaytı değiştirdiğinde nazik bir canlı bölge yeni slaytı duyurur. Otomatik oynatma sürerken duyurular kapalıdır, böylece okuyucu birkaç saniyede bir kesilmez.
• Klavye: odaklanmış slider'da oklar, PageUp/PageDown, Home/End; kısmen gizli bir slayttaki linke odaklanmak o slaytı görünür yapar.
• Otomatik oynatma kontrolü: görünür bir duraklat / oynat butonu (WCAG 2.2.2), üzerine gelince ve odaklanınca duraklama, ekran dışında duraklama.
• Hareket azaltma: 3D ve WebGL solmaya dönüşür, katmanlar hareketsiz görünür, otomatik oynatma ve Ken Burns kapanır.
• Bölünmüş yazı: harflere bölünen başlıklar cümlenin tamamını aria-label olarak tutar.
• Gerçek görseller: arka planlar alt değerini korur. alt attribute'u olmayan arka plan görselleri için konsol uyarır (dekoratif olanlar için alt="" kullanın).

Kendi dilinizde etiketler

İngilizce ve Türkçe dahili; sayfanın lang değerine göre seçilir (locale: "auto"). Her etiket değiştirilebilir:

new InsigneSlider(el, {
  label: 'Öne çıkan haberler',
  i18n: { prev: 'Vorherige Folie', next: 'Nächste Folie', slide: 'Folie {i} von {n}', goTo: 'Gehe zu Folie {i}' },
});

Size düşenler

• Slider'a bir ad verin: aria-label="Öne çıkan haberler".
• Anlamlı arka planlar için alt metni yazın.
• Görsel üzerindeki yazıyı okunur tutun; metnin arkasında bir gradyan gölge genelde yeterlidir.
• Okunması gereken içerikte otomatik oynatmadan kaçının.