Erişilebilir bantlar oluşturma

Robert Flack

Penny McLachlan

Lucas Radaelli

Yayınlanma tarihi: 29 Eylül 2025

Beğenin ya da beğenmeyin, carouseller yaygın olarak kullanılan ve istenen bir desendir. Bu nedenle, bir carousel uygulandığında sağlam ve erişilebilir olmalıdır. İlk boyamada etkileşimli, daha kolay bakım için bildirimsel ve yardımcı teknolojilerle test edilen semantik bir yapıyla oluşturulmalıdır.

Ancak karuselleri erişilebilir hale getirmek genellikle zordur. Odaklanmayı yönetmek, ekran okuyucu duyurularını doğru şekilde almak ve ekran dışındaki etkileşimli öğeleri kullanmak karmaşık olduğundan birçok sitedeki kaydırma çubuklarına erişilemez. Bu zorluklar, Chrome ekibinin CSS Overflow Module Level 5 kapsamında etkileşimli CSS kaydırma çubukları üzerinde çalışmasına yol açtı. Bu özellik, Chrome 135'te kullanıma sunuldu.

Özelliğin Chrome'da ilk kullanıma sunulmasının ardından, topluluktan çok sayıda geri bildirim aldık ve bu geri bildirimleri ele almak için çalıştık. Bu sürümde, ayrı ve gezinme amaçlı kaydırma işaretçisi modları desteği gibi yeni işlevlerin yanı sıra çeşitli hata düzeltmeleri yer alıyor. Örneğin:

• Chrome 140'ta kullanıma sunulan alt metnindeki sayaçlar için destek.
• Devre dışı bırakılmış bir ::scroll-button state öğesinin ekran okuyucular tarafından doğru şekilde okunmamasına neden olan sorun düzeltildi.
• ::scroll-marker öğesinin içerik değerinden bir ARIA etiketi adı aldığından emin olun.
• Tüm ::scroll-marker sözde öğelerinin "seçili" olarak okunmasına yol açan hata düzeltildi.

CSS Overflow 5'teki özelliklerin, ilk boyamada etkileşimli olan sağlam ve erişilebilir kaydırmalı öğeler oluşturabileceğine inanıyoruz. Bu yayında, bu özellikleri uzun süredir devam eden erişilebilirlik sorunlarını çözmek için nasıl kullanabileceğinize odaklanarak bu işlemi nasıl yapacağınız adım adım açıklanmaktadır.

Bantlara ilişkin daha genel bir giriş için CSS ile bantlar makalesine göz atın. Unutmayın: Hiçbir kullanıcı arayüzünün kutudan çıktığı gibi erişilebilir olacağı garanti edilemez. Sayfalarınızın erişilebilirliğini her zaman test etmeniz gerekir.

Ne tür bir carouselle ihtiyacınız var?

Koda geçmeden önce ne tür bir carousel oluşturduğunuzu bilmeniz önemlidir. Doğru erişilebilirlik stratejisi, kullanıcının içeriği nasıl deneyimlemesi gerektiğine bağlıdır. Bu yayında üç yaygın tür ele alınmaktadır:

Tek öğeli bantlar

Tek öğeli bantlarda, aynı anda yalnızca bir slayt tamamen görünür ve etkileşimlidir (örneğin, ana banner'lar veya slayt gösterileri).

Otomatik olarak sayfalandırılan döngüler

Otomatik olarak sayfalandırılmış bantlarda, ürün veya TV programı listesi gibi içerik "sayfaları" gösterilir.

Çok öğeli bantlar

Çok öğeli bantlarda, banttaki birden fazla öğe aynı anda görünür ancak sayfalandırma olmadan öğeler arasında tek tek kaydırabilirsiniz.

Her türdeki bantta farklı erişilebilirlik hususları ve en iyi uygulamalar bulunur.

Tek öğeli bantlar

Bu, klasik bir slayt gösterisidir. Bir seferde yalnızca bir alt öğenin okunması amaçlanır. Ancak çoğu durumda kullanıcılar, ek içerik hakkında bağlamsal ipuçları sağlamak için sonraki veya önceki öğenin "göz atma" görünümünü görür. Hedef, yalnızca ortalanmış ve tamamen görünür olan slaytın etkileşimli olmasını sağlamaktır.

Bu özelliği nasıl etkinleştireceğinizi adım adım açıklıyoruz.

1. adım: Kaydırma tutturma ile tek bir odaklanma zorunlu kılın

Kaydırma kapsayıcısının her zaman bir slayda "oturduğundan" ve öğelerin arada sıkışmadığından emin olmak için CSS kaydırma sabitleme özelliğini kullanın. Bu, kaydırma işleminden sonra bir öğenin doğru konumuna mükemmel şekilde "yerleşmesini" sağlayarak temiz bir kullanıcı deneyimi oluşturur.

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

2. adım: Döngü ve slayt değişikliklerini duyurun

Ekran okuyucu kullanan bir kullanıcının, bir carousele girdiğini ve slaytın ne zaman değiştiğini bilmesi gerekir. Bu işlem için carousel container öğesinde birkaç ARIA özelliği gerekir:

HTML yapısı şu şekildedir:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

3. adım: Yalnızca görünür slaytı etkileşimli hale getirin

Bu, erişilebilirlik açısından çok önemlidir. Kullanıcıların ekran dışı slaytlardaki düğmelere veya bağlantılara yanlışlıkla sekme tuşuyla gitmesini önler. Bunu yapmak için yeni scroll-state kapsayıcı sorgusunu ve interactivity özelliğini kullanın.

Öncelikle, interactivity: inert kullanarak her slayt öğesini varsayılan olarak etkisiz hale getirin. Ardından, görüntü alanında şu anda "yerinde duran" slaydı hedeflemek ve içeriğini interactivity: auto olarak ayarlamak için scroll-state kapsayıcı sorgusu kullanın.

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

Bu CSS ile tarayıcı, hangi öğelerin odaklanılabilir olduğunu otomatik olarak işler. Artık tabindex'i yönetmek için JavaScript gerekmiyor. scroll-state sorgusu, mevcut slayt dışındaki tüm slaytları etkisiz hale getirir.

Sayfalandırılmış bantlar

Bu desen genellikle içeriğin sayfalara gruplandırıldığı ürün veya seçenek galerileri için kullanılır. Erişilebilirlik, içeriği nasıl sunmak istediğinize bağlı olarak iki şekilde ele alınabilir.

Ayrı sayfalara sahip bir bant

İçinde role="tabpanel" bulunan tek bir öğe içeren role="region" kapsayıcısı kullanın. Bu tabpanel, içeriğini etkin sekmeyi veya sayfayı yansıtacak şekilde günceller.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

Etkileşimi yönetmek için view() zaman çizelgesine bağlı akıllı bir animasyon hilesi kullanın. Bu, sekme sırasının yalnızca ekranda şu anda görünür olan öğelere ulaşmasını sağlar.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

İçindekiler listesi

İçerik temelde bir liste ise doğru anlambilim için <ul> öğesini kullanın.

Örneğin:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

Bu desende, ekran dışındaki içeriği etkisiz hale getirmek için etkileşim özelliğini kullanmayın. Bunu yapmak, ekran okuyucular tarafından duyurulan öğe sayısını etkileyeceğinden tüm içeriklerin erişilebilirlik ağacında kalması gerekir.

Çok öğeli bantlar

Bu desen, birden fazla alt öğenin aynı anda görünür ve okunabilir olduğu karuseller için kullanılır. Örneğin, bir e-ticaret sitesindeki "ilgili ürünler" rafı.

Bu bantlar, aşağıdaki karara verdiğiniz yanıta bağlı olarak farklı şekilde davranır: Kullanıcının odak noktasını tek bir öğeye mi yönlendiriyorsunuz yoksa görünür tüm içeriğe serbestçe erişmesine mi izin veriyorsunuz?

1. desen: Görünür öğeler arasında tek bir etkileşimli a öğesi

Bu modelde birden fazla öğe görünür ancak yalnızca birincil veya "mevcut" öğe etkileşimlidir. Diğer görünür öğeler etkisizdir. Bu desen, kullanıcıyı bir dizi öğe arasında tek tek yönlendirmek için kullanışlıdır.

Bunu doğru şekilde oluşturmak için daha önce bahsedilen tek öğeli carousel ile aynı erişilebilirlik desenini kullanmanız gerekir. Bu kapsamda yapabileceğiniz işlemler:

• Etkileşimi uygulamak için kaydırma durumu kapsayıcı sorgusu kullanın: inert to non-active öğeler.
• Her bir öğenin birincil konuma (ör. kaydırma alanının merkezi) sabitlenebilmesi için öğelerinizin etrafına yeterli dolgu ekleyin. Bu sayede, tek tek gezinme modeli amaçlı ve sorunsuz bir şekilde çalışır.

2. Desen: Görünen tüm öğeler etkileşimlidir

Amacınız kullanıcıların görünen tüm öğelerle serbestçe etkileşim kurmasına izin vermekse en iyi uygulama, içeriğin hiçbir bölümünün etkileşime kapalı olmamasını sağlamaktır.

Bu desen için:

• İçerik anlamsal olarak bir liste ise <ul> öğesini kullanın. Bu, ekran okuyucu kullanıcıları için doğru bağlamı sağlar.
• Etkileşim yönetimi (interactivity: inert) kullanmayın. Görünen tüm içerik, erişilebilirlik ağacında kalmalı ve klavyeyle sekme tuşuna basılarak erişilebilir olmalıdır.

Özet

CSS Overflow 5, daha az erişilebilirlik sorunuyla yaygın ve etkileşimli bant desenlerini bildirimsel olarak oluşturmanıza olanak tanır. Anlamsal HTML, kaydırma durumu ve etkileşim gibi modern CSS ve doğru ARIA rolleri kullanarak ilk boyamada etkileşimli olan yüksek performanslı ve erişilebilir deneyimler oluşturabilirsiniz.

Bu yeni API'leri deneyin. Ancak her zaman olduğu gibi, bu kalıplar ve API'ler etkileşimli, hızlı ve erişilebilir bileşenler oluşturmayı kolaylaştırmak için tasarlanmış olsa da tam erişilebilirlik testinin yerini tutmaz. Kodunuzun erişilebilir olduğunu ve Temel hedefiniz için çalıştığını her zaman doğrulamanız gerekir.