Bir ürün sayfasında renkler küçük dairelerle, bedenler kısa düğmelerle gösteriliyor. Fareyle çalışan ziyaretçi seçimini yapabiliyor; ancak klavyeyle sayfada ilerleyen kişi seçeneğin üzerine geldiğini, onu seçtiğini veya ürünün o seçenekte bulunmadığını ayırt edemiyor. Başka bir ziyaretçi de “Mavi” seçeneğini yalnızca mavi bir daireden tanımak zorunda kalıyor. Ürün bilgisi doğru olsa bile seçim arayüzü bu bilgiyi herkes için anlaşılır biçimde sunmayabilir.

İstinye Eticaret Sitesi projesinde bu rehber, e-ticaret ürün varyantı seçicisini erişilebilir bir görev olarak inceliyor. Beden, renk, ölçü, paket veya model seçimi; ürün verisinin nasıl tutulduğundan, bütün ürün açıklamalarının hazırlanmasından ve genel bir erişilebilirlik denetiminden farklı bir arayüz konusudur. Amaç, belirli bir işletme veya gerçek satış sonucu hakkında iddiada bulunmak değil; tasarım, içerik ve geliştirme ekibinin aynı seçimi nasıl tanımlayıp sınayacağını göstermektir.

Seçilen şeyin ne olduğunu ilk anda açıklayın

Önce grubu “Beden seçin”, “Renk seçin” veya “Paket boyutunu seçin” diye adlandırın. Birden fazla grup varsa her birinin başlığı seçenekleriyle ilişkili olsun. “Mavi” adının hangi özelliği belirttiği görünür metinden anlaşılmalı; ürün özeti de seçiciyle aynı terimleri kullanmalıdır.

Etiket “M”, “2” ya da “Koyu” gibi iç kodlardan ibaret kalmamalı; neyi seçtirdiği anlaşılmalıdır. Ölçü seçimi gerçek ölçü tablosuna, paket seçimi doğru içeriğe dayanır. Her ürün bilgisini sorumlu kişi doğrular; tasarım ekibi benzer üründen tahmin yürütmez.

Kontrollerin görsel olarak bir grup hâlinde durması, bu ilişkinin kodda da anlaşılır olduğu anlamına kendiliğinden gelmez. W3C’nin WCAG 2.2’deki 1.3.1 “Bilgi ve İlişkiler” ölçütü, sunumla verilen yapı ve ilişkilerin programatik olarak belirlenebilmesini veya metinle sunulmasını ele alır. Tasarım incelemesinde başlığın ilgili seçimlerle ilişkisini, etiketlerin doğru kontrole bağlanmasını ve seçenek adlarının kendi bağlamında anlaşılmasını ayrı ayrı kontrol edin.

Rengi tek başına seçim adı yapmayın

Renk örneği, ürünü gözünde canlandırmaya yardımcı olabilir; fakat “bu koyu mavi” bilgisinin tek kaynağı renkten oluşan nokta olmamalıdır. W3C WCAG 2.2’nin 1.4.1 “Rengin Kullanımı” ölçütü, bilginin, eylemin veya durumun yalnız renkle anlatılmamasını ister. Seçeneğe görünür renk adı eklemek, seçili durumda işaret veya çerçeve kullanmak ve farklılaşmayı yalnız tona bırakmamak bu ihtiyaca yardımcı olur. Renk adı da ürünün gerçek görünümünü garanti eden bir ölçüm olarak sunulmaz; ekran ve ürün fotoğrafı değişkenleri ayrıca vardır.

Seçilen seçenek için sadece arka plan rengini değiştirmek yerine metin, simge veya belirgin şekil gibi başka bir işaret kullanın. “Seçili” görünümü odak göstergesiyle karıştırılmamalıdır: klavye odağı, o anda hangi kontrolün üzerinde olduğunuzu; seçili durum ise hangi seçeneğin tercih edildiğini anlatır. Bu iki durumun farklı görünmesi, fareyle ve klavyeyle yapılan incelemede farkı görmeyi kolaylaştırır. Seçili olmayan seçenek de sırf soluklaştırıldığı için okunamaz veya kullanılamaz hâle gelmemelidir.

Stokta olmayan seçeneği kaldırmak her zaman en açık çözüm değildir. Kullanıcı ürünün hangi renk veya ölçülerinin bulunduğunu öğrenmek isteyebilir. Seçenek gösteriliyorsa durumu metinle anlaşılır olmalı; gerçekten seçilemeyen kontrol yanlışlıkla etkin görünmemelidir. Ürün sorumlusu hangi durumların satışa açık olduğunu, hangi bilginin güncel tutulacağını ve stok değiştiğinde sayfanın ne göstermesi gerektiğini belirler. Tasarım bu kuralları örnek ürünlerle doğrulamadan varsaymamalıdır.

Klavye ile baştan sona seçim turu yapın

Fareyi bırakıp sayfanın başından başlayın. Sekme tuşuyla seçenek grubuna ulaşın, grubun adını anlayın, seçenekler arasında hareket edin, birini seçin ve seçimi değiştirin. Kullanılan kontrol tipinin olağan klavye davranışını ekipçe belirleyip gerçek tarayıcıda sınayın; her seçeneğin sekme sırasına girmesi, özellikle çok seçenekli bir grupta kullanımı gereksiz uzatabilir. Burada önemli olan belirli tuşları ezberletmek değil, seçim işlevinin klavyeyle tamamlanabilmesidir.

W3C’nin WCAG 2.2 2.1.1 “Klavye” ölçütü, içerikteki işlevlerin belirli bir tuş zamanlamasına bağlı olmadan klavye arayüzünden kullanılabilmesini ele alır. Bu, her özel kontrolün nasıl kodlanacağına ilişkin tek bir reçete değildir. W3C ayrıca standart HTML kontrollerinin teknik özelliklerine uygun kullanıldığında isim, rol ve durum bilgilerinin desteklenebileceğini belirtir; özel olarak programlanan kontrollerde ek inceleme gerekebilir. Projede özel bir açılır menü veya görsel düğme kullanılıyorsa seçme, değiştirme, odak ve devre dışı olma durumlarını ayrıca test edin.

Odak göstergesi her seçenekte görünür kalmalı ve klavye sırası içerik sırasıyla tutarlı olmalıdır. Bir seçenek değişince sayfanın başına sıçramak, kontrolün kaybolması veya odak halkasının arka planla seçilememesi sorundur. Birden fazla seçim grubu varsa kullanıcı birinden diğerine nasıl geçeceğini anlayabilmelidir. Klavye turunu sadece ilk ürünle bırakmayın: en uzun seçenek adı, bir seçeneğin kullanılamadığı durum ve fiyatı değişen ürünle de deneyin.

Ekran okuyucuyla seçim ve değişiklik bilgisini doğrulayın

Kontrolün adı, rolü ve güncel durumu, destekleyici teknoloji kullanan kişiye anlaşılır biçimde iletilmelidir. W3C WCAG 2.2’nin 4.1.2 “İsim, Rol, Değer” ölçütü kullanıcı arayüzü bileşenlerinin ad, rol, ayarlanabilir durum ve değer bilgilerinin programatik olarak belirlenmesini; değişiklik bildirimlerinin kullanıcı arayüzü ve destekleyici teknolojilere sunulmasını ele alır. Gerçek sayfada ekran okuyucuyla gezinerek grubun başlığını, seçeneğin adını, seçili durumunu ve devre dışı olup olmadığını kontrol edin. Yalnız kod incelemesi, duyulan deneyimin yerini tutmaz.

Seçim ürün fotoğrafını, fiyatı, teslimat açıklamasını veya ürün kodunu değiştiriyorsa, ekranda neyin güncellendiği de anlaşılır olmalıdır. Kullanıcı seçeneği seçtikten sonra doğru ürün özetinin göründüğünü hem görsel olarak hem de destekleyici teknolojiyle sınayın. Her küçük güncelleme için otomatik konuşma yaptırmak da kullanıcıyı yorabilir; hangi değişikliğin kararı etkilediğini, hangisinin kısa bir durum bildirimi gerektirdiğini ürün akışında değerlendirin. Ekran okuyucu ayarları ve tarayıcı farkları olabileceğinden test ortamını kayda geçirin.

Mobil ekranda ve büyütmede aynı görevi koruyun

Seçenek düğmeleri küçük olduğunda dokunma hedefini bulmak zorlaşabilir; uzun beden veya renk adları dar ekranda kesilebilir. Sayfa büyütüldüğünde etiketlerin kaybolmadığını, yatay kaydırma gerekmeksizin grubun takip edilebildiğini ve seçim sonrasında ürün özetinin hâlâ görünür olduğunu kontrol edin. Bu deneme, yalnızca “mobil uyumlu” görünüm kontrolü değildir. Kullanıcının hangi seçeneği seçtiğini ve seçimin satın alınan ürüne nasıl yansıdığını görmesini sınar.

İçerik, veri ve kabul testini aynı örnek ürünle bağlayın

Toplantıya sade bir ürün ve bazı seçenekleri stokta olmayan karmaşık bir örnek getirin. Ortak ve varyanta özgü kayıt alanları ayrı bir konudur; ilgili ürün, varyant ve stok rehberi bunu açıklar. Buradaki test, sayfadaki seçimin anlaşılır olmasıdır.

İçerik sorumlusu doğru seçeneği ve görsel eşleşmesini sağlar; tasarım, yazılım ve ürün ekibi aynı örneği inceler. Sayfanın yanıtlayacağı alışveriş soruları için ürün sayfası rehberi tamamlayıcıdır. Buradaki odak seçici ve seçim sonrası ürün bilgisidir.

Kabul senaryolarını görev şeklinde yazın: “Rengi adından bul”, “klavyeyle başka beden seç”, “stok dışı seçeneği ve nedenini anla”, “seçimden sonra ürün özetini doğrula”. Her görevde başlangıç durumu, test edilen tarayıcı ve destekleyici teknoloji, beklenen görünür ve programatik sonuçlar belirtilsin. Gerçek veride stok değişebileceğinden test kopyası kullanın; gerçek siparişe veya müşteriye müdahale etmeyin. Hata kaydında yalnız “erişilebilir değil” demek yerine hangi görevde, hangi seçenekle, hangi bilginin kaybolduğunu yazın.

Bu turu genel site kontrolleriyle birlikte değerlendirmek isterseniz web erişilebilirliği temel kontrolleri rehberi daha geniş sayfa görevlerini ele alır. Mobilde ürün seçimi ile sepet ve ödeme arasındaki adımlar için mobil e-ticaret kontrol turu ek bağlam sunar. Seçenek seçicisi bu rehberlerin tamamını karşılamaz; yalnız kendi ürün görevi içinde incelenir.

İş kapsamını ve teslimi açıkça tanımlayın

Proje kapsamına örnek ürünler, içerik sorumlusu, test cihazı ve destekleyici teknoloji ile düzeltme turunu yazın. Birkaç seçici testi bütün WCAG uygunluğunu kanıtlamaz; kriterler tasarım tartışmasına yardımcı olur, kapsamlı değerlendirme veya hukuki görüş yerine geçmez. E-ticaret yazılımı hizmetini değerlendirirken gerçek ürün ve satış kurallarınızı paylaşın.

Sık Sorulan Sorular

Ürün varyantı seçicisi erişilebilirlik açısından neden ayrı incelenmeli?

Seçici; ürün bilgisini, form kontrollerini ve alışveriş kararını aynı noktada birleştirir. Genel bir erişilebilirlik turu, tüm sayfayı kontrol eder; ancak beden, renk veya model değiştiğinde yeni ürün özetinin doğru sunulup sunulmadığını ayrıca denemeyebilir. Seçenek grubunun adı, seçili ve kullanılamayan durumları, klavye davranışı ve güncellenen fiyat ya da görsel birlikte sınanmalıdır. Bu dar tur, bütün sitenin erişilebilir olduğu sonucunu vermez.

Renk seçeneklerinde yalnız renk noktası kullanmak yeterli olur mu?

Tek başına renk noktası, seçeneğin adını veya seçili olduğunu herkes için açıklamaz. Renk adı metinle sunulabilir; seçilen durum ayrıca şekil, işaret veya metinle gösterilebilir. W3C’nin 1.4.1 ölçütü, rengi bilginin tek görsel aracı yapmamayı ele alır. Ürünün fotoğraftaki görünümü ve gerçek rengi hakkında doğrulanmayan kesinlik de kurulmaz.

Her seçenek düğmesinin ayrı ayrı sekme sırasına girmesi gerekir mi?

Tek bir zorunlu arayüz şablonu varsaymayın. Kontrol grubunun seçimi klavyeyle tamamlayıp tamamlamadığına, odak sırasının anlaşılır olup olmadığına ve kullanıcı arayüzünün beklenen davranışına bakın. W3C’nin 2.1.1 ölçütü bütün işlevlerin klavyeyle işletilebilmesini ele alır; testte kullanılan kontrolün hangi tuşlarla nasıl çalıştığı kaydedilmelidir. Özel uygulama kullanılıyorsa kendi davranışı özellikle denenir.

Seçeneklerin adı, rolü ve seçili durumu neden ayrı kontrol edilir?

Ekran okuyucu kullanıcısının hangi özellik grubunda, hangi seçenekte ve hangi durumda bulunduğunu anlayabilmesi gerekir. WCAG 2.2’nin 4.1.2 ölçütü bileşen adını, rolünü, değişebilir durum ve değerleri ve bunlardaki değişikliğin bildirilmesini ele alır. Ekranda görünür bir seçili işareti bulunması tek başına programatik durum bilgisinin doğru olduğu anlamına gelmez; gerçek destekleyici teknolojiyle sınayın.

Stokta olmayan varyantı listeden tamamen kaldırmak doğru mudur?

Bu karar ürün ve satış akışına bağlıdır. Seçenekleri gizlemek kullanılabilir bilgiyi azaltabilir; hepsini etkin göstermek de gerçeği yanlış aktarabilir. İşletme, stok dışı durumun müşteriye gösterilip gösterilmeyeceğini ve hangi metinle açıklanacağını belirlemeli; sayfa, gerçek örnek ürünle test edilmelidir. Bir üründe uygulanabilen yöntem her katalog için otomatik kural sayılmaz.

Seçim fiyatı ve ürün görselini güncelliyorsa kullanıcıya nasıl bildirilir?

Seçimin hangi ürün ve fiyatı oluşturduğu, sayfada ve yardımcı teknolojiyle anlaşılmalıdır. Seçim özeti güncel durumu göstermeli; önemli değişiklikler gözden kaçmamalıdır. Her görsel güncellemesinde uzun bir sesli duyuru yapmak gerekmez. Hangi bilginin satın alma kararını değiştirdiğini belirleyin ve gerçek tarayıcı ile ekran okuyucu kombinasyonlarında görev turu yapın.

WCAG kontrolü yapmak ürün seçicisinin tamamen uygun olduğunu gösterir mi?

Hayır. Buradaki ölçütler belirli sorunları düşünmeye yardımcı olur; yalnız birkaç senaryo veya ölçüt kontrol edilerek tüm WCAG uygunluğu kanıtlanamaz. Değerlendirmenin kapsamı, örnek sayfalar, kullanılan yöntem ve sınırlar raporlanmalıdır. Gerekirse uzman erişilebilirlik incelemesi ve hukuki görüş ayrıca alınmalıdır. Bu içerik sertifikasyon veya uyumluluk garantisi değildir.

E-ticaret projesinde seçici testini kim yapmalı?

İşletme ürün bilgisinin ve stok kurallarının doğruluğunu sağlar; tasarım ve geliştirme ekibi arayüzü, ilişkili kodu ve etkileşimi hazırlar; test ekibi belirlenen görevleri çalıştırıp bulguları kaydeder. Aynı kişi birden fazla rolü üstlenebilir, fakat kimin hangi bilgiyi onayladığı açık olmalıdır. Ürün gerçeğini bilmeyen ekip, renk, ölçü veya stok durumunu benzer bir üründen kopyalamamalıdır.

Mobil testte özellikle hangi durumlara bakılmalı?

Dar ekranda seçenek adlarının kesilmesini, düğmelerin yakınlığını, büyütmede grubun dağılmasını ve seçim sonrası özetin görünürlüğünü inceleyin. Sepet ve ödeme adımlarının daha geniş kontrolü için mobil e-ticaret rehberi tamamlayıcıdır.