Klavye Kontrollerinin Fareyle Kaydırmalı Bir Bulmacayı Bozması Nasıl Önlenir?
Masaüstü macera yardımcısı olarak tarayıcı tabanlı bir kaydırmalı bulmaca geliştiriyorsanız fareyle sürükleme ve klavye hareketlerinin aynı bulmaca durumu üzerinde çalışmasını sağlayın ve klavye kısayollarını yalnızca bulmaca ile sınırlandırın. Buradaki temel kontroller odaklanma, olay işleme ve sürükleme tamamlama işlemleridir: Bir metin alanında tuşa basılması bir taşı hareket ettirmemeli ve imleç bir taş sınırını aştığında sürükleme işlemi kesintiye uğramamalı veya kaybolmamalıdır.
Bulmacayı beklenmedik şekilde neyin hareket ettirdiğini belirleyerek başlayın
Bir bulmaca fare işlemi sırasında bir ok tuşuna tepki veriyorsa bunun nedeni genellikle gereğinden fazla geniş kapsamlı bir klavye dinleyicisidir. document veya window nesnesine eklenen bir dinleyici; oyuncu bir ipucu alanına yazı yazarken, bir menüyü kullanırken veya başka bir denetimle etkileşime girerken bile ok tuşlarını algılayabilir. Ayrıca bulmacayı değiştirdiği anda kaydırma gibi tarayıcı davranışlarını da tetikleyebilir.
Sorunu kısa bir kontrol listesiyle yeniden oluşturun: Bir taşa tıklayıp sürükleyin; bulmaca sınırının dışına doğru sürükleyin; bulmaca odaktayken bir ok tuşuna basın; ardından bir ipucu giriş alanı, düğme veya menü odaktayken bir ok tuşuna basın. Tahtanın değişip değişmediğini, sayfanın kayıp kaymadığını, odağın yer değiştirip değiştirmediğini veya sürüklemenin durup durmadığını not edin. Bu gözlemler, bulmaca dinleyicisi kaynaklı bir sorunu imleç takibinden veya tarayıcının varsayılan davranışından ayırt etmenizi sağlar.
Bulmacaya belirgin bir odak sınırı verin
Oyun alanına net bir klavye giriş noktası olan bir kontrol muamelesi yapın. Odaklanabilir bir oyun alanı kapsayıcısı kullanın ve bulmaca tuşlarını yalnızca o alan etkinken veya odak oyun alanına ait bir taştayken işleyin. İpucu düğmeleri ve metin alanları gibi ilgisiz kontrolleri bu tuş işleme sınırının dışında tutun. Bir oyuncunun oyun alanının ne zaman yanıt vereceğini anlayabilmesi için odak konumunu görünür hale getirin.
Bir tuşu yorumlamadan önce olay hedefini (event target) kontrol edin. Odak bir giriş alanında, metin alanında, düzenlenebilir bir öğede veya ayrı bir düğmedeyse tuşa müdahale etmeyin. Eşli bir macera aracı için bu durum, başka biri bulmacayla oynarken bir oyuncunun rün, isim veya ipucu girdiği anlarda önem taşır: Yazı yazma eylemi kazara taş hareketine dönüşmemelidir.
Klavye kullanımının yine de çalışması gerekir. W3C kılavuzu, işlevlerin mümkün olan yerlerde bir klavye arayüzü aracılığıyla kullanılabilir olması gerektiğini açıklar ve nesneleri bir konuma taşımayı klavyeyle yapılabilecek bir eylem olarak tanımlar. Tuşları tamamen kaldırmak yerine kapsamlarını dikkatlice belirleyin. W3C: Başarı Kriteri 2.1.1'i Anlama: Klavye
Bulmaca komutlarını tarayıcı varsayılanlarından ayırın
Oyun alanı için, oyun alanı odaktayken kullanılan ok tuşları gibi küçük ve belgelenmiş bir tuş kümesi seçin. Dinleyicide önce tuşun bulmacanın kullandığı tuşlardan biri olduğunu ve oyun alanının aktif hedef olduğunu doğrulayın. Ancak o zaman hamleyi uygulayın ve gerekiyorsa o tuş için tarayıcının varsayılan eylemini iptal edin. Her tuşu genel olarak engellemekten kaçının: Oyuncuların normal yazı yazmaya, tarayıcıda gezinmeye ve bulmaca dışındaki kontrollere ihtiyacı olabilir.
preventDefault(), olay iptal edilebilir olduğunda tarayıcının varsayılan eylemini iptal eder, ancak olayın diğer dinleyicilere yayılmasını durdurmaz. Bu da bir taşın hareket etmesine neden olan ikinci bir dinleyiciyi düzeltmeden sayfanın kaydırılmasını önleyebileceği anlamına gelir. Oyun durumunu değiştiren dinleyiciyi bulup kapsamını daraltın; net olay sahipliği yerine genel bir iptal yöntemine başvurmayın. MDN: Olay: preventDefault() yöntemi
İmleçle sürükleme işlemini oyun alanının tamamında sorunsuz tutun
Sürükleme etkileşimi için, sürüklemeyi başlatan basma işleminden bırakma veya iptal anına kadar tek bir aktif imleci takip edin. İmleç olayları pointerdown, pointermove, pointerup ve pointercancel sağlar; imleç yakalama (pointer capture), imleç orijinal tıklama alanının dışına çıksa bile sonraki imleç olaylarının oyun alanına yönlendirilmesini sağlayabilir. Kesintiye uğrayan bir hareketin bulmacayı takılı bir sürükleme durumunda bırakmaması için hem pointerup hem de pointercancel durumlarında aktif sürüklemeyi temizleyin. MDN: İmleç olayları
Sürüklenen taşı, imleç takibini kaybedecek şekilde yeniden oluşturmaktan veya değiştirmekten kaçının. Arayüz bir öğeyi sürükleme sırasında DOM içinde taşıyorsa MDN, imleç yakalamanın bu taşıma işleminden sonra ayarlanması gerektiğini belirtir. İmleç geçersiz bir konum üzerinde bırakıldığında ne olacağına karar verin: Kaydırmalı bir bulmaca için taşı önceki konumuna geri döndürmek veya geçerli bir konuma oturtmak, ilgisiz taşları sessizce değiştirmekten daha kolay anlaşılır.
Aynı hamleyi sürükleme olmadan da kullanılabilir hale getirin
Bir bulmaca; fare, klavye ve basit imleç girişlerini bir arada destekleyebilir. Örneğin boş alana bitişik bir taşa tıklamak veya dokunmak onu hareket ettirebilir; bu taşı sürüklemek isteğe bağlı bir doğrudan müdahale hareketi olarak kalabilir; odaklanmış oyun alanındaki ok tuşları ise klavye kullanımını sağlayabilir. Bu girişlerin tümü aynı hamle doğrulama mantığını çağırmalıdır; böylece bir hamle, nasıl talep edildiğine bakılmaksızın tutarlı bir şekilde geçerli sayılır veya reddedilir.
Bu durum aynı zamanda kullanışlı bir tasarım kontrolü de sağlar: Bir oyuncu bulmacayı sürüklemeden, yalnızca bir tıklama veya dokunma ile tamamlayabilir mi? W3C'nin WCAG 2.2 kılavuzu, klavye erişimini ve sürüklemeye tek imleçli bir alternatif sunulmasını ayrı konular olarak ele alır. Sunduğu örnekler arasında sürükleme işleminin yön kontrollerine yapılan tıklamalarla değiştirilmesi yer alır. Yalnızca klavyeyle kullanılabilen bir alternatif, tek başına bu imleç alternatifini sağlamış olmaz. W3C: Başarı Kriteri 2.5.7'yi Anlama: Sürükleme Hareketleri
Kaydırmalı bir bulmaca için, bulmacanın bitişik hamle kuralını koruduğundan her seferinde bir komşu taşa tıklamak genellikle doğal bir alternatiftir. Bu etkileşim net olmayacaksa görünür hamle düğmeleri mevcut yönü açıklayabilir. W3C'nin G219 tekniği, aynı temel eylemi sürükleme olmadan gerçekleştiren tek imleçli kontrollere örnekler sunar. W3C: G219: İçerik üzerinde çalışan sürükleme hareketleri için bir alternatifin mevcut olmasını sağlama
Kısa bir girdi matrisi ile test edin
Bulmacayı masada kullanmadan önce, aynı oyun alanı düzeni ve başlangıç durumuyla her bir girdi yolunu baştan sona deneyin. Geçerli bir hamlenin oyun alanını bir kez güncellediğini, geçersiz bir hamlenin alanı değiştirmeden bıraktığını ve ilgisiz kontrollerin normal davranışlarını koruduğunu doğrulayın.
Fare: Geçerli bir taşı sürükleyin, alanın dışına bırakın ve geçersiz bir hamle yapmayı deneyin. Oyun alanının sürüklemeyi kaybetmediğini ve beklenmedik bir şekilde değişmediğini doğrulayın.
Klavye: Oyun alanına odaklanın, desteklenen her yönü kullanın, ardından odağı bir metin alanına taşıyıp yazı yazın. Yalnızca oyun alanına odaklanılmış tuşların taşları hareket ettirdiğini ve yazı yazmanın sayfayı kaydırmadığını veya oyun alanını değiştirmediğini doğrulayın.
Sürüklemeden imleç kullanımı: Geçerli bir komşu taşa tıklayın veya dokunun. Diğer giriş yöntemleriyle aynı hamleyi yaptığını doğrulayın.
Kesinti: Bir sürükleme işlemini iptal edin veya yarıda bırakın, ardından başka bir işlem başlatın. Eski bir seçimin kalmadığını doğrulayın.
Bir test başarısız olursa önce en dar ilgili katmanı inceleyin: Klavye davranışı için olay hedefi ve odak durumu; kesintiye uğrayan sürüklemeler için imleç yakalama ve temizleme; tutarsız kurallar için ise paylaşılan hamle doğrulayıcı. Bu sıra, geliştiricinin macera aracını genel amaçlı bir kontrol eğitimine dönüştürmeden sorunu tespit etmesi için somut bir yol sunar.