Müşteri görevleri etrafında kapsama alanı oluşturun
Değer yaratan rotaları ve sonuçları listeleyin: bir hizmeti bulma, arama, öğe ekleme, rezervasyon, oturum açma, yardım isteme veya ödeme yapma gibi. Her biri için şekil değiştirebilecek veya başarısız olabilecek bileşenleri adlandırın: navigasyon, filtreler, kartlar, tablolar, resimler, afişler, formlar, çekmeceler (drawers) ve gömülü widget’lar. İçeriğinizin daraldığı genişlikleri test edin; yalnızca mevcut telefon modellerinin kataloğunu çıkarmayın. Her kırılma noktasının hemen altında, tam üzerinde ve tam ortasında test edin.
Dar ve orta genişlikli telefonlar, tablet-benzeri bir genişlik, dizüstü, geniş masaüstü ve görev değiştiriyorsa yatay yönlendirmeyi dahil edin.
Varsa uzun başlıklar, boş sonuçlar, doğrulama hataları, fiyat rozeti, tam adresler ve daha uzun etiketleri kullanın.
Yeniden akış (reflow), okunabilirlik ve yakınlaştırmayı kanıtlayın
Sayfanın uygun bir viewport ayarına sahip olduğunu doğrulayın, sonra sayfa düzeyinde yatay kaydırma olup olmadığına bakın. Sabit resimler, geniş alanlar, negatif margin’ler, off‑canvas paneller ve afişler yaygın nedenlerdir. W3C’nin WCAG 2.1 Reflow ölçütü; 320 CSS pikseli eşdeğerinde dikey kaydırmalı içeriği, 1280 piksellik bir viewport’ta %400 yakınlaştırma (zoom) senaryosu dahil olmak üzere tanımlar. Bu ölçüt kapsamdaysa, gerçek yakınlaştırma senaryosunu test edin. Bir harita, video veya veri tablosu iki boyutlu düzen gerektirebilir; ancak bu kaydırmanın bileşen içinde kalmasını sağlayın ve çevreleyen sayfanın yeniden akmasını tercih edin.
Test edilen her sınırta başlıkları, ana içeriği, altbilgileri, sabit çubukları, diyalogları ve hata özetlerini kontrol edin.
Dar ekran için bilgiyi yeniden düzenleyin; bir gerekliliği, fiyat detayını veya yardım yolunu sessizce kaldırmayın.
İçeriği ve formları zorlayın
İçerik operasyonları, bir CSS yayını olmasa bile duyarlı hatalara neden olabilir. Onaylanmış en uzun başlığı, birkaç rozeti, eksik bir resmi, seçili bir filtreyi, büyük bir yasal bildirimi ve tarayıcı tarafından doldurulmuş bir alanı test edin. Sütunlar yığıldığında, okuma ve klavye sırasının hâlâ mantıklı olduğundan emin olun. Gerçek formu küçük bir cihazda tamamlayın: kontrolleri açın, hatayı düzeltin ve gönderin. Üçüncü taraf widget’ları, kapsayıcıları, onay durumu, yazı tipleri ve stilleri sonucu değiştirebileceğinden üretime benzer sayfada test edin.
Olası maksimum uzunlukları ve kombinasyonları yansıtın, ancak QA kanıtlarında müşteri veya ödeme verisi eklemeyin.
Bildirimleri, sohbeti, promosyonları ve doğrulama mesajlarını birlikte açın; hiçbirisi birincil eylemi veya odaklanmış alanı kapatmamalı.
Her giriş yolunu çalıştırın
Büyük bir ekran fare olduğunu garantilemez, küçük ekran yalnızca dokunmayı garantilemez. hover medya özelliği (hover media feature) ana girdinin rahatça hover yapıp yapamayacağını test eder; dolayısıyla hover bir eylemi veya açıklamayı geliştirmeli ama tek yol olmamalıdır. Masaüstünde klavye ve gösterge (pointer) kullanımını; dokunma cihazında dokunma ve kaydırmayı; ve ilgili yerlerde karışık girişli cihazları test edin. Küçük kapatma düğmelerini, stepper’ları, chip’leri, takvimleri ve simge eylemlerini gözden geçirin. WCAG 2.2 Target Size (Minimum), tanımlı istisnalar dahil olmak üzere 24 by 24 CSS-pixel hedef boyutunu belirtir; bu bir kapsam ve istisnaları olan bir ölçüttür, herkes için her 24 piksellik kontrolün aynı derecede kolay olduğu sözü değildir.
Sayfada Tab ile ilerleyin. Odak görünür kalmalı, mantıklı bir sırayı izlemeli ve menülere ile diyaloglara öngörülebilir şekilde girip çıkabilmelidir.
Temel bir hover açılımını odak, dokunuş veya görünür bir kontrol ile erişilebilir hale getirin ve kafa karıştırıcı ilk dokunma davranışlarını önleyin.
Sınırlı koşullarda varlıkları ve performansı doğrulayın
Bir resim konteynerine sığabilir ama cihaz için yanlış dosya olabilir. Ortamın kapsayıcıda kaldığını, gerektiğinde yer tahsis ettiğini, faydalı kırpmasını koruduğunu ve uygun adayları (candidates) talep ettiğini kontrol edin. Srcset ve sizes, tarayıcıya sağlanan görüntü kaynakları arasından seçim yapması için bilgi verir; belirli bir isteği garanti etmezler. Sorunları erken ortaya çıkarmak için DevTools hız sınırlamasını (throttling) kullanın, ancak onun CPU ve ağ kontrolleri geliştirme bilgisayarına göre koşulları simüle eder. Ana yolları gerçek bir cihaz ve bağlantıda yeniden kontrol edin. Yazı tiplerini, öne çıkan medyayı, karuselleri, istemci tarafı işlemleri ve üçüncü taraf betikleri gecikme, kayma veya engellenmiş dokunuşlar açısından inceleyin.
Rotayı, görünüm alanını, gerçek veya simüle edilmiş bağlantıyı ve neyin yavaş veya kararsız hale geldiğini yakalayın; benzer koşulları karşılaştırın.
Güvenliyse, çekirdek görevin kullanılabilir kalıp kalmadığını öğrenmek için test yapısında önemsiz gömüleri geciktirin.
Onarımı proaktif çalışma olarak ele alın
For Status Is UP, duyarlı hazır olma durumu proaktif kesintisizlik (uptime) optimizasyonudur: kullanıcıyı engelleyen bir cihaz yolunu belirleyin, nedenini düzeltin, onarımı kanıtlayın ve tekrarlamayı önleyin. Bu, bir izleme uyarısının her düzeni veya etkileşim hatasını değerlendirebileceği iddiası değildir. Önceliklendirmeyi görev etkisine ve erişime göre yapın. Dağıtımdan önce komşu genişlikleri ve değişen yolculuğu gerçek donanımda test edin. Paylaşılan navigasyon, stiller, betikler, ödemeler veya entegrasyonlardaki değişiklikler için bir geri alma (rollback) planı hazırlayın. Yayından sonra, kanıt adımlarını tekrarlayın ve kanıtı değişiklik kaydına iliştirin.
Rota, cihaz veya görünüm alanı, yönelim, giriş, durum, beklenen sonuç, gerçekleşen sonuç ve maskelenmiş bir yakalama belirtin.
Bir rotaya özel geçici çözüm yerine bileşen, düzen kuralı, token veya görüntü teslim kuralı düzeltmesini tercih edin; istisnalara bir sahip ve kaldırma planı verin.