1. Düzeni seçmeden önce sayfanın görevini belirleyin
Müşteri veya işletme görevi taşıyan sayfalarla başlayın: hizmet sayfaları, ürün sayfaları, potansiyel müşteri formları, rezervasyon, hesap girişi, sepet ve yardım. Her biri için bir tamamlanma beyanı yazın; örneğin: “İlk kez gelen bir ziyaretçi bu hizmeti anlayabilir, ilgili kanıtı görebilir ve bir çağrı talep edebilir.” Sayfanın birden çok görevi varsa hangi görev ilk görünecekse ona karar verin.
İçeriğini temel, destekleyici veya isteğe bağlı olarak listeleyin. Temel demek kısa olmak anlamına gelmez; bir ziyaretçinin fiyat bağlamı, uygunluk, teslimat ayrıntısı veya karşılaştırma bilgisine ihtiyacı olabilir. Bu materyale dar düzen üzerinde net bir yol verin. Google, mobil ve masaüstünde birincil içeriğin eşdeğer olmasını önerir; farklı sunumlara (sekmeler veya akordiyonlar gibi) izin verir.
Dar bir genişlikte bir iş arkadaşı sayfanın ne sunduğunu, kime yardımcı olduğunu ve sonraki anlamlı eylemi söyleyebilmelidir.
2. Dar temel sürümü eksiksiz hâle getirin
Bir masaüstü düzenini küçültmek yerine çalışan tek sütunlu bir yol ile başlayın. Esnek konteynerler kullanın, metnin sarmasına izin verin ve tarayıcının düzeni cihaz genişliğine göre ölçeklemesine izin veren uygun bir viewport ayarı ekleyin. Yakınlaştırmayı engellemeyin. Menülerin, bildirimlerin, görsellerin, gömülü öğelerin ve form hata mesajlarının görünüm alanı içinde kaldığını; istemeden ortaya çıkan sayfa düzeyinde yatay kaydırmanın genellikle bir hata olduğunu kontrol edin.
Normal okuma ve görev içeriği için zorlu bir yeniden akış kontrolü olarak 320 CSS pikseli kullanın. WCAG 2.2, bu genişlikte dikey içeriğin bilgi veya işlevsellik kaybı veya iki boyutlu kaydırma olmadan sunulmasını açıklar. Bir harita, grafik veya veri tablosu kendi kaydırma bölgesine ihtiyaç duyabilir, ancak bu çevresindeki sayfanın yana doğru kaydırılmasını haklı çıkarmaz.
Resimleri kapsayıcılarına sığdırın ve tarayıcının yüklemeden önce yer ayırabilmesi için boyut bilgisi sağlayın.
3. Temel yolu kırılganlaştırmadan geliştirmeler ekleyin
Aşamalı iyileştirme (progressive enhancement) demek, temel olarak gerekli içerik ve işlevselliğin çalışması; yetenekli tarayıcılar ve daha geniş ekranların ise ekstra özellikler alması demektir. Adres, ürün detayları, form etiketleri, fiyat açıklaması ve gönderme yolu animasyon, hover veya sonradan yüklenen bir betiğe bağlı olmamalıdır. Daha geniş bir düzen karşılaştırma paneli, kalıcı navigasyon veya daha zengin filtreleme ekleyebilir; ancak bu, temel yolu eksik hâle getirmemelidir.
Uygulayıcıdan içerik sıkıştığında veya israf olduğunda bir kırılma noktası (breakpoint) eklemesini isteyin; belirli bir cihaz adı göründüğü için eklemeyin. Bir kırılma noktası yalnızca bir düzen kuralının değiştiği yerdir. Yardım metinlerini, politika maddelerini, incelemeleri, meta verileri veya önemli yapılandırılmış ayrıntıları dar düzenlerde gizleyerek kaldırmayın.
Önce temel bir galeri görseli ve açıklaması gösterin; ardından scriptler mevcutken yakınlaştırma veya kaydırma kontrolleri ekleyin.
4. Dokunma, açıklık ve kurtarma için kontroller tasarlayın
Dokunma ergonomisi hassas bir fare işaretçisi yerine eller için tasarlamayı gerektirir. Düğmeler, onay kutuları, kapatma ikonları, adet seçiciler ve form seçeneklerine yanlış dokunmaları azaltacak yeterli boyut ve boşluk verin. Anlamı açık olmayan ikonları etiketleyin. Fiyatı, alt menüyü, açıklamayı veya bir eylemi yalnızca hover ile göstermekten kaçının.
WCAG 2.2, gösterge hedefleri için en az 24 × 24 CSS piksel hedef-boyutu kriterini (Level AA) içerir; aralıklar ve satır içi bağlantılar gibi belirtilen istisnalar vardır. Bunu bir konfor garantisi değil asgari bir referans olarak değerlendirin. Kritik eylemler açık etiketler, cömert boşluk ve geri alınabilir bir onay adımı hak eder. Resmi iddialar veya yüksek riskli yollar için yetkin bir erişilebilirlik incelemesi isteyin.
Etiketleri görünür tutun, kullanılabilir doğrulama geribildirimi gösterin ve bir hata sonrasında girilen değerleri koruyun.
5. Medya ve gömülü öğeleri ziyaretçi yolunun bir parçası olarak ele alın
Her görselin bilgilendirici, ikna edici veya dekoratif olup olmadığına karar verin. Bilgilendirici bir görsel uygun bir metin alternatifi ve dar düzen kırpmasının gerekli detayı korumasını gerektirir. Duyarlı resim seçenekleri, her ziyaretçinin en büyük masaüstü varlığı indirmesi yerine tarayıcıların uygun bir kaynağı seçmesine olanak tanır. Bir kahraman görseli veya video sayfa amacını ve birincil eylemi gölgelememelidir.
Harita, sohbet, video, ödeme, zamanlama, onay ve inceleme bileşenlerini envanterleyin. Dar ekranda bunların yüklenme durumunu, kontrol boyutunu, sınırlandırılmış düzenini ve uygulanabilir bir yedek yolunu kontrol edin. Ödeme, kimlik veya düzenlemeye tabi veri akışlarında nitelikli güvenlik, gizlilik ve uyumluluk inceleyicilerini dahil edin; görsel test güvenlik değerlendirmesinin yerine geçmez.
Her harici bileşeni, sahibini, işlevini ve yavaş veya bozuk olması durumunda onaylı yedeğini kaydedin.
6. Yayına almadan önce görev yollarını test edin ve düzeltme planı yapın
Erken aşamada dar, orta ve geniş genişlikleri incelemek için tarayıcı duyarlı modunu kullanın. Chrome Device Mode görünüm alanı, dokunma, yönelim, ağ ve CPU koşullarını yaklaşık olarak taklit edebilir; ancak Chrome bunun gerçek cihaz yürütmesinin bir yaklaşık olduğu konusunda not düşer. Mümkün olduğunda kritik yolları gerçek telefonlarda ve ilgili tarayıcılarda tamamlayın.
Bir görevi test edin, yalnızca ekran görüntüsünü değil: soğuk yükleme, gezinme, geçersiz ve geçerli form gönderimi, yönlendirme değişikliği, yakınlaştırma ve üçüncü taraf ekrandan dönüşü test edin. URL, tarayıcı veya cihaz, görev, beklenen sonuç, sahibi ve geri alma kararını kaydedin. Büyük şablon, ödeme süreci, CMS veya bağımlılık değişiklikleri için yayımlamayı bir aşamaya bölün ve önceki yolu geri yüklemeye hazırlıklı olun; baskı altında doğaçlama yapmayın.
Kritik görev çalıştıktan, kontroller kullanılabilir olduktan, sayfa düzeyinde yatay kaydırma olmadıktan ve ana bağımlılıkların yedeği hazır olduktan sonra onaylayın.