Bir ziyaretçi ürün listesini daraltmak için iki filtre seçer. Görsel liste yenilenir, ancak klavyeyle ilerleyen kişinin odağı beklenmedik biçimde sayfanın başına sıçrar; ekran okuyucu kullanan kişi ise yeni sonuçların geldiğini anlamaz. Başka bir kullanıcı yalnızca “18” duyabilir ve bunun ürün sayısı mı, seçili filtre sayısı mı olduğunu çıkaramaz. Filtrelerin neyi yaptığı kadar, uygulamanın ne yaptığını nasıl bildirdiği de tasarımın parçasıdır.

Bu rehber, sayfa yenilenmeden arka planda yanıtlanan ürün filtreleri güncellendiğinde kısa durum bilgisini görünür metin ve yardımcı teknolojiyle tutarlı sunma kararına odaklanır. Kategori ağacını, filtre seçeneklerinin ticari anlamını ya da arama eşleşme kalitesini yeniden tasarlamaz. Örnekler geneldir; belirli bir işletme hakkında iddia taşımaz.

Önce hangi değişikliğin duyurulacağını seçin

Her görsel değişim ayrı bir konuşma duyurusu gerektirmez. Kullanıcı “Uygula” düğmesine bastığında sonuç kümesinin yenilenmesi, aramanın sürmesi veya sonuç bulunmaması anlamlı bir durumdur. Filtre panelindeki her onay kutusuna odaklanmak ya da her ürün kartını tek tek okumak ise iş akışını gereksiz yere bölebilir. Tasarım ekibi, kullanıcının bir eylemden sonra bilmesi gereken en küçük ama yeterli bilgiyi tanımlamalıdır.

Karar, filtrelerin anında mı yoksa toplu seçimden sonra mı uygulanacağıdır. Anında güncelleme seçildiyse hızlı ardışık seçimler birden fazla geçici sonuç oluşturabilir. “Uygula” düğmesi kullanılıyorsa ziyaretçi seçimlerini tamamlayıp tek bir talep gönderir. Her iki model de mümkün olabilir; sayfa, hangi seçimin etkin olduğunu ve sonuçların ne zaman güncellendiğini tutarlı göstermelidir. Arayüz davranışını ürün kataloğu ve teknik işleyişle birlikte tarif edin.

Görsel sonuç ile programatik durumun aynı şeyi anlattığını doğrulayın

Ekran gören kullanıcı liste başlığındaki sayıyı veya kartların değişmesini fark edebilir. Yardımcı teknoloji kullanan kişi için de eylemin sonucu programatik olarak anlaşılır olmalıdır. W3C’nin Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.2’deki 4.1.3 Durum Mesajları açıklaması, odak değişmeden ortaya çıkan “18 sonuç bulundu” veya “Sonuç yok” gibi kısa bilginin uygun biçimde belirlenmesini ele alır. W3C, sonuç listesinin tamamını durum mesajı saymaz; listenin güncellendiğini anlatan kısa metin ayrı bir durum olabilir.

Bu ayrım, tüm sayfa içeriğini her değişiklikte yeniden okutmaya çalışmamak için önemlidir. Sonuç listesi kendi başına gezinilebilir kalırken, kısa durum cümlesi kullanıcının eylemiyle ilişki kurar. Bir teknik seçenek, uygun bağlamda durum rolü veya canlı bölge kullanmaktır; bu tek başına her arayüzün erişilebilir olduğunu kanıtlamaz. Uygulama, kullanılan tarayıcı ve yardımcı teknolojiyle sınanmalıdır. Teknik ekip yöntemi seçerken görünür mesajın, duyurunun ve gerçek liste durumunun aynı veriden üretildiğini kontrol etmelidir.

Kısa ve bağlamı tam bir mesaj yazın

“Tamamlandı” tek başına yetersiz olabilir: hangi işlem tamamlandı? “18” de bağlamsızdır. Daha açık bir mesaj, örneğin “Filtreler uygulandı. 18 ürün bulundu.” biçiminde eylemi ve sonucu birlikte söyleyebilir. Sonuç yoksa “Seçtiğiniz filtrelerle ürün bulunamadı” denebilir; “Arama başarısız” ifadesi ise teknik hata izlenimi verir. Gerçek hata yaşandıysa bunu ürün bulunmamasından ayırın.

Mesajı kısa tutmak, bağlamı silmek anlamına gelmez. Ekranda zaten “18 ürün” başlığı görünüyorsa aynı cümleyi her yerde yinelemek gerekmeyebilir; fakat yardımcı teknoloji duyurusunun tek başına anlaşılabilir olup olmadığı ayrıca denenmelidir. W3C’nin durum mesajı tekniği, değişen sayının yanında açıklayıcı bağlamın korunmasının kullanıcıya yardımcı olabileceğini belirtir. Rakamı güncelleyen kod yalnızca “18” parçasını duyuruyorsa bu sayı tek başına yeterli olmayabilir.

Odağı otomatik taşımayın; kullanıcının konumunu koruyun

Filtre uygulandıktan sonra odağı sonuçların başına zorla göndermek, seçimini gözden geçirmek isteyen kişinin kontrolünü bozabilir. Odak filtre panelindeki düğmede kalıyorsa kullanıcı yeni listeye kendi tercih ettiği anda geçebilir. Ancak bu sırada kısa durum bilgisi, listenin değiştiğini fark etmesini sağlar. Görünür “sonuçlara geç” bağlantısı veya sonuç başlığına ulaşılabilir bir gezinme yolu eklemek bazı tasarımlarda yardımcı olabilir; karar gerçek etkileşim modeline göre verilir.

Sonuç sıfır olduğunda seçili filtreleri görünür tutun. Kullanıcı hangi kısıtları kaldırabileceğini anlamalı, tek tek seçimleri temizleyebilmeli veya tüm filtreleri sıfırlayabilmelidir. Sıfırlama sonrasında yeni liste ile durum mesajı yeniden eşleşmelidir. Filtre paneli kapalıysa, seçili koşulların özeti ve temizleme yolu kaybolmamalıdır. Amaç her kullanıcıyı aynı gezinme adımına zorlamak değil, mevcut konum ve sonraki seçenekleri açık tutmaktır.

Hızlı seçimlerde eski yanıtın yeni sonucu ezmesini önleyin

Asenkron bir istek yavaşlayabilir. Kullanıcı önce “mavi”, hemen ardından “mavi ve küçük” seçtiğinde ilk isteğin yanıtı ikinci yanıttan sonra dönebilir. Uygulama eski yanıtı güncelmiş gibi ekrana koyarsa ürün kartları, seçili filtre özeti ve duyurulan sayı çelişir. Teknik ekipte istek sırasını veya güncellik bilgisini yöneten bir yaklaşım bulunmalıdır. Burada belirli bir yazılım tekniği zorunlu tutulmuyor; önemli olan geç gelen eski sonucun son kullanıcı durumunu değiştirmemesidir.

Arama veya filtre sürerken “Sonuçlar güncelleniyor” gibi kısa bir bekleme bilgisi düşünülebilir. Bu mesaj sürekli tekrar etmemeli, işlem bitince güncel sonuç ya da hata durumuyla yer değiştirmelidir. Hızlı tıklamalarda her ara adımı duyurmak yerine son bilinçli seçimi esas almak daha sakin bir deneyim sağlayabilir. Gecikme uzadığında kullanıcının yeniden tıklaması yeni, yinelenen istekler oluşturuyor mu diye de bakın. Görsel yükleme işareti ve programatik bekleme durumu aynı aşamayı temsil etmelidir.

Hata, boş sonuç ve bekleme durumlarını birbirinden ayırın

“Sonuç bulunamadı” ürün listesinde uygun eşleşme olmadığı anlamına gelir; “Liste yüklenemedi” ise teknik isteğin tamamlanmadığını söyler. İki durumu tek metne indirgemek kullanıcıyı filtreleri silmeye veya tekrar denemeye yanlış yönlendirebilir. Hata durumunda seçilmiş filtreleri koruyup yeniden deneme yolu sunmak yararlı olabilir. Başarısız istekte önceki liste ekranda kalıyorsa bunun eski olduğu anlaşılmalıdır; güncelmiş gibi bırakmak doğru karar vermeyi zorlaştırır.

Filtre değeri geçersizleşirse, örneğin sonuç kaynağında artık bulunmayan bir seçenek kayıtlıysa, ekibin uygulama davranışı önceden tanımlanmalıdır. Sistem sessizce seçim silmemeli; seçim özeti ve liste arasındaki fark açıklanmalıdır. Bekleme sırasında eski sonuç gösteriliyorsa “yükleniyor” bilgisi bu içeriğin henüz yeni seçime ait olmadığını belirtebilir. Mesajların nasıl duyurulduğu kullanılan araçlar ve gerçek içeriklerle test edilmelidir; tek bir tasarım ekranı çalışma kanıtı değildir.

Kabul testini gerçek görevlerle kurun

Yayın öncesi kısa bir senaryo matrisi hazırlayın. Klavyeyle filtreye ulaşma, seçenek değiştirme, uygulama düğmesine basma, güncel sonucu duyma, sıfır sonuçtan geri dönme ve tüm seçimleri temizleme ayrı adımlardır. Aynı akışı ekran okuyucu ve büyütülmüş görünümle deneyin. Mobilde panel açılıp kapandığında odak kayboluyor mu? Bildirim, seçim özeti veya sabit bir alt çubuk tarafından örtülüyor mu? Liste değişince ekranda görünen sayı ile duyurulan bilgi aynı mı?

Yavaş bağlantı ve hızlı ardışık seçim de test matrisinde olmalıdır. İlk isteği geciktirip ikinci isteği önce tamamlatmak, eski yanıtın güncel listeyi ezip ezmediğini gösterebilir. Hata yanıtı, boş katalog ve başarılı sonuç farklı metinler üretmelidir. Her senaryo için beklenen görsel durum, beklenen kısa duyuru, odak konumu ve sonuç kümesini yazın. “Erişilebilir” gibi tek bir genel işaret yerine hangi görevlerin ve hangi cihaz/yardımcı teknoloji birleşiminde denendiğini kaydedin.

Bu çalışmayı genişletirken web erişilebilirliği için temel tasarım kontrolleri odak, metin ve bileşen değerlendirmesi açısından; e-ticaret kategori ve filtre yapısı ise seçeneklerin ürün mantığıyla ilişkisi açısından yardımcı olabilir. Arama sorgusunun katalogda nasıl ele alınacağı farklı bir karardır; bu konuda site içi arama ve boş sonuç rehberi ayrı kapsam sunar. Proje kapsamı için web tasarım ve yazılım hizmetini inceleyebilirsiniz.

Durum bilgisinin sahibi ve bakım adımını belirleyin

Sonuç sayısı hangi kaynaktan geliyor, filtre uygulama yanıtıyla mı yoksa ürün kartlarının gerçekten çizilmesiyle mi güncelleniyor? İçerik ve teknik ekip bu soruya ortak cevap vermelidir. Arayüz etiketi elle güncellenip liste eski kalıyorsa erişilebilir duyuru yanlış bilgi verir. Aynı veri kaynağı görünür başlık ve programatik mesajı beslemeli; başarısızlıkta hangi eski bilginin tutulduğu açıkça belirtilmelidir.

Bu tür bir kontrol tek başına erişilebilirlik uygunluğu beyanı değildir; kapsamlı değerlendirme ayrıca planlanmalıdır.

Sık Sorulan Sorular

Filtre uygulanınca tüm ürün listesi ekran okuyucuya yeniden okutulmalı mı?

Genellikle amaç tüm kartları otomatik okutmak değil, kullanıcının yaptığı işlemin sonucunu kısa ve bağlamlı bildirmektir. Liste ayrıca gezinilebilir kalmalıdır. W3C’nin WCAG 4.1.3 açıklaması da arama sonuç listesinin kendisini durum mesajıyla aynı saymaz; “18 sonuç bulundu” gibi kısa bir durum bilgisini ayrı değerlendirir. Kararı gerçek görevlerle yardımcı teknolojide sınayın.

Sonuç sayısı değiştiğinde odağı otomatik olarak listeye taşımak gerekir mi?

Her durumda gerekmez. Odak taşımak seçimini sürdüren veya filtre ayarını gözden geçiren kişinin konumunu değiştirebilir. Odağı korurken kısa durum mesajı sunmak ve sonuçlara erişilebilir bir gezinme yolu sağlamak daha kontrollü olabilir. Sayfa yeni bir bağlama geçiyorsa davranış farklı değerlendirilebilir. Kararı masaüstü, mobil ve klavye senaryolarında test edin; tek tasarım yaklaşımını evrensel kural gibi kullanmayın.

Bir sonuç sayısı mesajında hangi bilgiler bulunmalı?

İşlem ve sonuç tek başına anlaşılacak kadar bağlamlı olmalıdır. “Filtreler uygulandı. 18 ürün bulundu.” örneği, yalnızca “18” demekten daha açıktır. Ekranda aynı bilgi zaten varsa tekrar miktarını değerlendirin; ancak yardımcı teknoloji duyurusu ekrandaki bağlamdan bağımsız duyulabilir. Sayı güncellenirken ürün adedi mi, seçili filtre mi olduğu açık kalmalıdır.

Her filtre değişiminde ayrı bir duyuru yapılmalı mı?

Arayüz anında uyguluyorsa her hızlı seçim ara sonuç üretebilir ve çok sık duyuru kullanıcıyı bölebilir. Toplu uygulama düğmesi varsa tek sonuç mesajı doğal olabilir. Tasarım, güncel ve kasıtlı seçimin hangi anda uygulandığını belirlemeli; bekleyen eski yanıtlar yeni durumu ezmemelidir. Duyurunun zamanını yavaş bağlantı ve hızlı ardışık seçimlerle deneyin.

“Sonuç yok” ile teknik hata mesajını aynı kullanabilir miyiz?

Hayır; biri mevcut koşullarda uygun kayıt olmadığını, diğeri listenin yüklenemediğini anlatır. Ayrım yapılmazsa kullanıcı gereksiz filtreleri kaldırabilir veya gerçek bir bağlantı hatasını içerik eksikliği sanabilir. Boş sonuçta filtreyi değiştirme ve temizleme seçenekleri sunulabilir. Teknik hatada yeniden deneme ve önceki listenin güncelliğine dair açıklama gerekebilir.

Filtre sonucu durumu yardımcı teknolojiye nasıl duyurulmalı?

W3C’nin 4.1.3 ölçütü, durum bilgisinin programatik olarak belirlenebilmesini ister. W3C’nin durum rolü tekniği bunun örnek yollarından biridir; tek zorunlu yöntem değildir. Seçilen yaklaşımın görünür mesajla tutarlı çalıştığını ve odağı gereksiz değiştirmediğini gerçek tarayıcı ve yardımcı teknoloji birleşimlerinde doğrulayın.

Filtreler arka planda güncellenirken eski sonuçları ekranda tutabilir miyiz?

Tutulabilir, ancak eski liste yeni seçimle eşleşiyormuş gibi sunulmamalıdır. Bekleme durumu görünür ve programatik biçimde açıklanabilir; sonuç tamamlandığında sayı, seçili filtre özeti ve kartlar aynı yanıtı temsil etmelidir. İstek hata verirse eski içeriğin güncel olmadığı anlaşılmalı ve uygun yeniden deneme yolu bulunmalıdır. Hangi davranışın seçildiği arayüzün işleyişine göre belgelenmelidir.

Tek bir otomatik tarama sonucu filtre arayüzünün erişilebilir olduğunu kanıtlar mı?

Hayır. Otomatik araçlar belirli işaretleme veya kontrast sorunlarını yakalayabilir, ancak gerçek görevde odağın korunup korunmadığını ve duyurunun kullanıcıya bağlam sağlayıp sağlamadığını tek başına değerlendirmez. Klavye ve yardımcı teknolojiyle senaryo denemeleri gerekir. Test raporu hangi sayfa, filtre, tarayıcı ve yardımcı teknoloji birleşiminin incelendiğini açıkça yazmalı; kapsam dışındaki bölümler için uygunluk iddiası taşımamalıdır.