Technical Tutorials

Ön uç geliştirme alanındaki değişen ortamda erişilebilirlik artık bir sonradan düşünce değil, temel bir gerekliliktir. Yıllar boyunca geliştiriciler, düzenleri görünüm boyutlarına göre ayarlamak için öncelikle medya sorgularına güveniyordu. Genel duyarlılık için etkili olsa da, bu yaklaşım genellikle karmaşık bileşen hiyerarşilerindeki bağlama özgü kısıtlamaları göz ardı eder. İşte CSS Konteyner Sorguları; stillerin tarayıcı penceresi yerine bir üst öğenin boyutuna göre uyarlanmasını sağlayan dönüştürücü bir özelliktir. ARIA canlı bölgeleriyle birleştirildiğinde, bu araçlar hem görsel olarak duyarlı hem de yardımcı teknolojiler için anlamsal olarak kapsayıcı olan sağlam, bağlama duyarlı arayüzlerin oluşturulmasını sağlar.

Sadece Görünüme Dayalı Duyarlılığın Sınırlamaları

@media sorguları kullanan geleneksel duyarlı tasarım küresel olarak çalışır. Küçük ekranlarda bir gezinme çubuğu hamburger menüye dönüşebilir, ancak aynı gezinme widget'ı bir panodaki dar bir kenar çubuğunun içine gömüldüğünde ne olur? Görünüm geniş olabilir, ancak widget'ı barındıran konteyner değildir. Bu durumlarda düzen bozulabilir veya kullanılamaz hale gelebilir, bu da motor veya görsel engeli olan kullanıcıları duyarlı olmayan öğelerle mücadele etmeye zorlar. CSS Konteyner Sorguları, bileşenlerin yerel bağlamına yanıt vermesini sağlayarak tüm dağıtım ortamlarında tutarlılık sağlar.

Bağlama Duyarlı Düzenler İçin Konteyner Sorgularının Uygulanması

Konteyner sorgularını uygulamak için önce bir konteyner tanımlamanız gerekir. Bu, bir üst öğeye container-type uygulanarak yapılır. Tanımlandıktan sonra, alt öğeler @container kurallarını kullanarak o konteynerin boyutlarını sorgulayabilir. Bu teknik, tek bir kart bileşeninin tam genişlikli bir hero bölümünde mi yoksa dar bir sütunda mı olduğuna bağlı olarak farklı görünmesi gerektiği bileşen kütüphaneleri için özellikle güçlüdür. Aşağıdaki pratik örnekte, bir kart bileşeni mevcut alana göre metin ve resim düzenini nasıl uyarlar:

.card-container {
  /* Sorgu amaçları için konteyneri tanımla */
  container-type: inline-size;
  container-name: card-layout;
}

/* Dar konteynerler için varsayılan düzen */
.card {
  display: flex;
  flex-direction: column;
}

/* Geniş konteynerler için uyarlanabilir düzen */
@container card-layout (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  
  .card__image {
    width: 200px;
    flex-shrink: 0;
  }
}

Bu yaklaşım, düzenin etrafındaki çerçeveye veya düzen ızgarasına bakılmaksızın kullanılabilir kalmasını sağlar.

ARIA Canlı Bölgelerinin Kritik Rolü

Görsel duyarlılık, erişilebilirlik için denklemin sadece yarısıdır. Dinamik içerik güncellemeleri—form doğrulama hataları, yükleme durumları veya arama sonuçları gibi—ekran okuyuculara iletilmelidir. Doğru sinyalleştirme olmadan, yardımcı teknolojilere güvenen kullanıcılar sayfa durumunun değiştiğinden habersiz kalabilir. İşte burada ARIA (Erişilebilir Zengin İnternet Uygulamaları) Canlı Bölgeleri devreye girer. Bir öğeye aria-live özniteliğini uygulayarak tarayıcıya, o öğenin içeriğindeki değişiklikleri kullanıcıya duyurmasını söylersiniz. polite değeri, ekran okuyucunun güncellemeyi duyurmadan önce mevcut görevini tamamlamasına izin verirken, assertive hemen müdahale eder ve bu da kritik hatalar için kullanışlıdır.

Dinamik İçeriğin Konteyner Sorgularıyla Entegrasyonu

Bu kombinasyonun gerçek gücü, konteyner sorgularını dinamik ARIA bölgeleriyle eşleştirdiğinizde ortaya çıkar. Konteyner genişliğine göre görüntüleme formatını değiştiren ve aynı zamanda yeni bildirimlerin ekran okuyuculara duyurulmasını sağlayan bir bildirim sistemi hayal edin. Hem bu teknolojileri kullanan bir bildirim bileşenini nasıl yapılandırabileceğinize dair bir örnek:




  
  
    Profiliniz başarıyla güncellendi.

Bu örnekte, bildirim, bir kullanıcının tarayıcı penceresini yeniden boyutlandırması veya belirli bir çerçeve bileşeni içinde mobil cihazda siteyi görüntülemesi gibi durumlarda üst konteyner küçüldüğünde düzenini uyarlar. Eş zamanlı olarak, JavaScript div içindeki metni güncellerse, aria-live özniteliği sayesinde ekran okuyucu yeni durumu duyuracaktır.

Sonuç

Erişilebilir, duyarlı arayüzler oluşturmak, hem görsel sunumu hem de anlamsal yapıyı göz önünde bulunduran bütünsel bir yaklaşım gerektirir. CSS Konteyner Sorguları, geleneksel medya sorgularının ele alamayacağı karmaşık, bağlama bağlı düzenleri ele almak için gereken esnekliği sağlar. Öte yandan, ARIA canlı bölgeleri, dinamik içerik değişikliklerinin tüm kullanıcılar tarafından, gezinme yönteminden bağımsız olarak algılanabilir olmasını sağlar. Bu araçları ustalıkla kullanarak ön uç geliştiriciler, görsel olarak sağlam olmanın ötesinde, kapsayıcı uygulamalar oluşturabilir ve herkes için sorunsuz bir deneyim sağlar. Konteyner sorguları için tarayıcı desteği büyüdükçe, bunları erişilebilirlik araç setinize entegre etmek artık isteğe bağlı değildir—temel bir gerekliliktir.