--- title: 'Döngüsel İçerik Gezinimi' source: 'https://academia.sh/tr/kurslar/erisilebilir-kaliplar/donguisel-icerik-gezinimi' course: 'Erişilebilir Bileşen Kalıpları' language: tr updated: '2026-08-17T18:09:33+00:00' license: 'CC BY-SA 4.0' --- # Döngüsel İçerik Gezinimi Otomatik geçişin okuma süresiyle ilişkisi, durdurma denetiminin koşulsuz gerekliliği, görünmeyen kartların sekme sırasından çıkarılması ve otomatik değişen içeriğin neden duyurulmadığı. Buraya kadarki bileşenlerde içerik yerinde durdu ve kullanıcı ona kendi hızıyla ulaştı. Katalog ana sayfasındaki öne çıkan kayıtlar şeridi bunun tersini yapar: beş kart tek bir alanda sırayla gösterilir ve geçiş kullanıcının bir eylemi olmadan gerçekleşir. Kalıbın gerekçesi genellikle alan tasarrufudur — beş kart bir kartın yerini kaplar. Bedeli ise ölçülebilir: kullanıcının okuma hızı ile geçiş aralığı arasındaki ilişki, hareketin durdurulabilirliği ve görünmeyen kartların klavye sırasında ne yaptığı. Bu ders bedeli sayıya çevirir. ## Kalıbın Çözdüğü Sorun ve Kullanılmayacağı Yer Döngüsel gezinim, sıralı ve eşdeğer bir içerik kümesini sınırlı bir alanda sunar. Kullanım koşulu iki maddedir: kartlar birbirinin **alternatifi** olmalı (biri kaçırılınca bilgi kaybolmamalı) ve kullanıcı hepsini görmek zorunda olmamalıdır. Bu koşul sağlanmıyorsa kalıp yanlıştır. Bir adımlar dizisi, bir form akışı ya da kaçırılmaması gereken bir uyarı şeride konmaz. Son bölümdeki karşılaştırma bunun nedenini sayıyla veriyor: şeritte içeriğin yüzde sekseni her an görünmez durumdadır. ## Okuma Süresi ile Geçiş Aralığı Aşağıdaki hesap kartların okuma süresini kelime sayısından tahmin eder ve geçiş aralığı seçeneklerini bu süreye göre değerlendirir. ```js // dongu.mjs — otomatik gecisli icerik seridi: okuma suresi, durdurma ve sekme sirasi // Ana sayfadaki "one cikan kayitlar" seridi: bes kart, her karta bir metin. const KARTLAR = [ { baslik: "Gökbilim El Kitabı", metin: "Gözlem düzeneğinin kurulumu ve ölçüm günlüğü tutma yöntemleri.", eylem: 2 }, { baslik: "Kuzey Gökyüzü Atlası", metin: "Kuzey yarımküre takımyıldızlarının mevsimlere göre haritaları.", eylem: 2 }, { baslik: "Ölçüm Yöntemleri", metin: "Sıcaklık, nem ve basınç ölçümünde hata payının hesaplanması.", eylem: 1 }, { baslik: "Yamaç Meteorolojisi", metin: "Yükseltiye bağlı sıcaklık değişiminin uzun dönem kayıtları.", eylem: 2 }, { baslik: "Kayıt Defteri Tarihi", metin: "Gözlem defterlerinin arşivlenme biçimleri ve okunma sorunları.", eylem: 1 }, ]; // 1. Okuma suresi: karakter sayisindan tahmini okuma suresi. // Olcut: dakikada 200 kelime (yetiskin, tanidik icerik), kelime basina ortalama 6 karakter. const KELIME_DK = 200; const okumaSuresi = (s) => { const kelime = s.trim().split(/\s+/).length; return (60 * kelime) / KELIME_DK; }; console.log("kart kelime okuma suresi (s)"); let enUzun = 0; for (const k of KARTLAR) { const t = okumaSuresi(k.baslik + " " + k.metin); enUzun = Math.max(enUzun, t); console.log(` ${k.baslik.padEnd(24)} ${String((k.baslik + " " + k.metin).split(/\s+/).length).padStart(4)} ${t.toFixed(1).padStart(14)}`); } console.log(`en uzun kartin okuma suresi: ${enUzun.toFixed(1)} s`); // 2. Gecis araligi kararlari ve sonuclari. const ARALIKLAR = [3, 5, 8, 12]; console.log("\naralik (s) en uzun karti okumaya yeter mi WCAG 2.2.2 gerektirir mi"); for (const a of ARALIKLAR) { console.log( `${String(a).padStart(9)} ${(a >= enUzun ? "evet" : "HAYIR").padStart(29)} ` + `${(a > 5 ? "evet (5 s ustu hareket)" : "evet (otomatik baslayan hareket)").padStart(32)}` ); } console.log("kural: sure ne olursa olsun durdurma denetimi zorunludur; sure yalniz"); console.log(" okuma yetismesini belirler."); // 3. Sekme siralamasi: gizli kartlar sirada kalirsa ne olur? const eylemToplam = KARTLAR.reduce((t, k) => t + k.eylem, 0); const gorunen = KARTLAR[0]; console.log("\n--- sekme duragi sayisi ---"); console.log(` butun kartlar sirada : ${eylemToplam + 4} (kart eylemleri + onceki/sonraki + durdur + nokta grubu)`); console.log(` yalniz gorunen kart : ${gorunen.eylem + 4}`); console.log(` fark : ${eylemToplam - gorunen.eylem} durak gorunmeyen icerige gidiyor`); // 4. Odak seridin icindeyken gecis olursa. const SENARYO = [ { ad: "gecis surer, odak icerde", odakKaybi: true, sonuc: "odak belge kokune duser" }, { ad: "odakta duraklar", odakKaybi: false, sonuc: "kullanici okumasini bitirir" }, { ad: "uzerine gelmede duraklar", odakKaybi: true, sonuc: "klavye kullanicisi korunmaz" }, ]; console.log("\n--- odak seridin icindeyken otomatik gecis ---"); console.log("politika odak kaybi sonuc"); for (const s of SENARYO) { console.log(` ${s.ad.padEnd(28)} ${(s.odakKaybi ? "var" : "yok").padEnd(11)} ${s.sonuc}`); } // 5. Duyuru politikasi: otomatik gecis duyurulur mu? function duyuruPolitikasi(otomatik) { return otomatik ? { canliBolge: "kapali", gerekce: "kullanicinin baslatmadigi degisiklik duyurulmaz" } : { canliBolge: "kibar", gerekce: "kullanicinin kendi eylemi sonucu gelen icerik duyurulur" }; } console.log("\n--- duyuru politikasi ---"); for (const otomatik of [true, false]) { const p = duyuruPolitikasi(otomatik); console.log(` gecis ${(otomatik ? "otomatik" : "elle").padEnd(9)} canli bolge: ${p.canliBolge.padEnd(7)} ${p.gerekce}`); } // 6. Konum bildirimi: kacinci kart goruluyor? const konum = (i, n) => `${i + 1} / ${n}`; console.log("\nkonum bildirimi ornekleri: " + KARTLAR.map((_, i) => konum(i, KARTLAR.length)).join(" ")); // 7. Serit yerine dizilim: ayni icerik kaydirilmadan gosterilseydi? console.log("\n--- serit ile dizilimin karsilastirmasi ---"); console.log(` seritte ayni anda gorunen kart : 1 / ${KARTLAR.length}`); console.log(` izgarada ayni anda gorunen kart: ${KARTLAR.length} / ${KARTLAR.length}`); console.log(` seritte gorunmeyen icerik : %${(100 * (KARTLAR.length - 1) / KARTLAR.length).toFixed(0)}`); ``` ``` kart kelime okuma suresi (s) Gökbilim El Kitabı 11 3.3 Kuzey Gökyüzü Atlası 9 2.7 Ölçüm Yöntemleri 10 3.0 Yamaç Meteorolojisi 9 2.7 Kayıt Defteri Tarihi 10 3.0 en uzun kartin okuma suresi: 3.3 s aralik (s) en uzun karti okumaya yeter mi WCAG 2.2.2 gerektirir mi 3 HAYIR evet (otomatik baslayan hareket) 5 evet evet (otomatik baslayan hareket) 8 evet evet (5 s ustu hareket) 12 evet evet (5 s ustu hareket) kural: sure ne olursa olsun durdurma denetimi zorunludur; sure yalniz okuma yetismesini belirler. --- sekme duragi sayisi --- butun kartlar sirada : 12 (kart eylemleri + onceki/sonraki + durdur + nokta grubu) yalniz gorunen kart : 6 fark : 6 durak gorunmeyen icerige gidiyor --- odak seridin icindeyken otomatik gecis --- politika odak kaybi sonuc gecis surer, odak icerde var odak belge kokune duser odakta duraklar yok kullanici okumasini bitirir uzerine gelmede duraklar var klavye kullanicisi korunmaz --- duyuru politikasi --- gecis otomatik canli bolge: kapali kullanicinin baslatmadigi degisiklik duyurulmaz gecis elle canli bolge: kibar kullanicinin kendi eylemi sonucu gelen icerik duyurulur konum bildirimi ornekleri: 1 / 5 2 / 5 3 / 5 4 / 5 5 / 5 --- serit ile dizilimin karsilastirmasi --- seritte ayni anda gorunen kart : 1 / 5 izgarada ayni anda gorunen kart: 5 / 5 seritte gorunmeyen icerik : %80 ``` Çıktının ilk bölümü en uzun kartın yaklaşık üç buçuk saniyede okunduğunu gösteriyor. Bu tahmin tanıdık içerik ve akıcı okuma varsayar; ekran okuyucuyla dinleyen, düşük görme keskinliğiyle okuyan ya da içeriğe yabancı bir kullanıcı için süre kat kat uzar. Tahmin bu yüzden bir alt sınırdır, hedef değil. İkinci bölüm aralık seçeneklerini iki ölçütle değerlendiriyor. Üç saniyelik aralık en uzun kartı okumaya yetmiyor. Beş saniyenin üstündeki her aralık ise hareketi süreli hareket kategorisine sokuyor. Tablonun asıl gösterdiği şu: **hangi aralık seçilirse seçilsin durdurma denetimi zorunludur.** Aralık yalnız okumanın yetişip yetişmediğini belirler; kullanıcının denetimi elinde tutması ayrı ve koşulsuz bir gerekliliktir (WCAG 2.2.2). ## Görünmeyen Kartlar Sekme Sırasında Ne Yapar Üçüncü bölüm sekme durağı sayısını karşılaştırıyor. Beş kartın tamamı sırada bırakılırsa on iki durak oluşur ve bunların altısı o anda **görünmeyen** içeriğe gider. Klavye kullanıcısı şeridi geçerken görmediği kartların bağlantılarına odaklanır; odak göstergesi ekranda görünmeyen bir yerdedir. Kural açıktır: görünmeyen kart klavye sırasından da erişilebilirlik ağacından da çıkarılır. Kartların tamamına erişim, şeridin kendi gezinme denetimleriyle sağlanır — önceki, sonraki ve konum noktaları. ## Odak İçerideyken Geçiş Dördüncü bölüm üç politikayı karşılaştırıyor. Geçişin sürmesi, odaktaki ögenin ortadan kalkması demektir; odak belge köküne düşer ve kullanıcı yerini kaybeder. Bu, Kip Pencereler dersindeki odak dönüş kuralının ihlalidir: odağın taşıyıcısı kaldırılıyorsa odağın nereye gideceği önceden kararlaştırılmış olmalıdır. Yalnız işaretçi üzerine gelmede duraklamak klavye kullanıcısını korumaz. Doğru politika, **odak şeridin içindeyken geçişin durmasıdır**; kullanıcı okumasını bitirip odağı dışarı taşıdığında döngü kaldığı yerden sürer. ## Otomatik Değişen İçerik Duyurulur mu Beşinci bölüm duyuru politikasını ayırıyor. Kullanıcının başlatmadığı bir değişiklik duyurulmaz: her geçişte yeni kartın okunması, ekran okuyucu kullanıcısının o anda okuduğu metni sürekli kesintiye uğratır. Otomatik geçişte şerit sessizdir. Kullanıcı önceki ya da sonraki düğmesine bastığında durum tersine döner: değişikliğin kaynağı kullanıcının kendi eylemidir ve sonucu bildirilmelidir. Altıncı bölümdeki konum bildirimi bu duyurunun içeriğidir — kaçıncı kartın kaç karttan gösterildiği. Konum noktaları da aynı bilgiyi taşır ve bu yüzden salt süsleyici değildir. ## Klavye Sözleşmesi | Tuş | Davranış | |---|---| | `Tab` | Şeridin denetimlerine ve **yalnız görünen** kartın eylemlerine uğrar | | `Enter` / `Boşluk` | Odaktaki denetimi çalıştırır: önceki, sonraki, durdur, konum noktası | | Ok tuşları | Konum noktaları grubu içinde kartlar arasında gezer (dönen sekme durağı) | Şeridin kendisi bir sekme kümesi gibi kurulduğunda ok tuşu kuralı Sekmeler dersindeki sözleşmeyle aynıdır; kart içeriği bir bağlantı listesiyse ok tuşu kuralı yoktur. ## Ölçülebilir Kısıtlar - Beş saniyeden uzun süren, otomatik başlayan hareket için duraklatma, durdurma ya da gizleme denetimi zorunludur (WCAG 2.2.2). - Hareket azaltma tercihi bildirildiğinde otomatik geçiş **başlatılmaz**; Kullanıcı Tercihleri dersindeki kural burada da geçerlidir. - Görünmeyen kartlar sekme sırasında ve erişilebilirlik ağacında bulunmaz. - Konum noktalarının hedef boyutu 24×24 pikselden küçük olamaz (WCAG 2.5.8); nokta görsel olarak küçükse etkin alan büyütülür. - Otomatik geçişte canlı bölge kapalıdır; kullanıcı eylemiyle gelen geçiş kibar bölgeden duyurulur. ## Sık Yapılan Hata En sık hata, durdurma denetimini hiç koymamak ya da yalnız işaretçi üzerine gelmeye bağlamaktır. İkincisi, konum noktalarını süs sayıp ad vermemektir: "1 / 5" bilgisi hiçbir kanalda yoksa kullanıcı kaç kart olduğunu bilemez. Üçüncüsü, şeridi kaçırılmaması gereken içerik için kullanmaktır — kampanya duyurusu, uyarı ya da tek seferlik bilgi şeride konduğunda görülme olasılığı beşte bire iner. ## Özet - Döngüsel gezinim yalnız birbirinin alternatifi olan, kaçırılması bilgi kaybı yaratmayan içerik için kullanılır; şeritte içeriğin yüzde sekseni her an görünmez. - Geçiş aralığı okuma süresine göre seçilir (modelde en uzun kart 3.3 saniye), ama aralık ne olursa olsun durdurma denetimi koşulsuz zorunludur. - Görünmeyen kartlar sekme sırasından çıkarılır: beş kartlık şeritte bu karar altı durağı görünmeyen içerikten alır. - Odak şeridin içindeyken otomatik geçiş durur; yalnız işaretçiye bağlı duraklatma klavye kullanıcısını korumaz. - Otomatik geçiş duyurulmaz, kullanıcı eylemiyle gelen geçiş "kaçıncı / kaç" konumuyla duyurulur. ## Sonraki Adım Buraya kadarki bileşenlerin hepsi sayfanın akışı içindeydi: kart, sekme, tablo ve şerit kendi yerlerinde durur, kullanıcı onlara gider. Sıradaki bileşenler ise akışın **üstüne** çıkar ve çoğu zaman odağı devralır: ödünç alma onayı bir kip pencerede sorulur, sonuç bir bildirim şeridiyle iletilir, bekleme bir göstergeyle anlatılır. Sonraki konu bu katmanı ele alır ve ilk dersi kip pencerelerle başlar — odağın nasıl tuzaklanacağı, pencerenin nasıl kapatılacağı ve kapandığında odağın nereye döneceği.