Hareket azaltılınca web deneyimi nasıl tamamlanır?

Önce hareketin görevini yazın

Sitedeki hareketleri tek tek listeleyin: sayfa açılışı, kart geçişi, otomatik logo şeridi, yükleme göstergesi ve kullanıcı tıklamasıyla başlayan karşılaştırma. Her birinin karşısına ne anlattığını yazın. Sadece atmosfer sağlayan hareket ile bir durum değişimini açıklayan hareketin yerine aynı çözümü koymak zorunda değilsiniz.

Örneğin bir üretim sürecinin üç adımı kaydırmayla sırayla beliriyorsa, sakin sürümde bunlar numaralı bir liste olarak birlikte görülebilir. Sonuç yine okunabilir olmalı. İçeriği görünür yapan animasyon kaldırılırken başlangıçtaki gizli stil korunursa ziyaretçi boş sayfayla karşılaşır; tasarım ve geliştirme kontrolü bu ayrıntıyı kapsasın.

Cihaz tercihini anlamlı bir alternatife çevirin

MDN, prefers-reduced-motion özelliğinin cihazda belirtilen hareket azaltma tercihini algıladığını açıklıyor. Bu tercih, büyük yakınlaşmaları, kaydırma takibini veya gereksiz hareketleri kaldıran bir düzeni seçmek için kullanılabilir. Varsayılan deneyimin daha yavaş çalıştırılmış kopyası her zaman uygun alternatif değildir.

Bir kartın ekrana uzaktan uçması yerine kartı doğrudan göstermek çoğu anlatım için yeterlidir. Durum değişimi gerekiyorsa sabit bir simge ve açık metin kullanmayı değerlendirin. Renk değişikliği tek başına anlamı taşımamalı. Sakin sürümde aynı bağlantılar, ürün bilgileri ve iletişim yolları bulunmalı; bu bir eksiltilmiş hizmet sürümü değildir.

Hareket envanteri örneği

Durdurma kontrolünü ayrıca değerlendirin

W3C’nin ilgili ölçütünde kendiliğinden başlayan, beş saniyeden uzun süren ve başka içerikle birlikte sunulan hareket için, temel bir işlev açısından zorunlu olmadığı sürece durdurma, bekletme veya gizleme yolu gerekir. Bu koşullu kuralı bütün kısa geçişlere aynı düğmeyi eklemek şeklinde yorumlamayın.

Öte yandan yalnızca sistem tercihini desteklemek, gerekli bütün durdurma kontrollerinin yerine geçmez. Bir şeridin sadece fare üzerindeyken durması da kalıcı bir seçim sunmaz. Ziyaretçi kontrolü kullandıktan sonra metni okuyabilmeli ve isterse hareketi yeniden başlatabilmeli. Otomatik yenilenen içerik için koşulları ayrıca değerlendirin.

İki sürümü aynı görevle deneyin

İlk açılış, bölüm bağlantısı, geri düğmesi ve form sonucu gibi durumları iki tercihte de inceleyin. Hareket ayarı sayfa açıkken değişirse görünümün ne yapacağını da kontrol edin. Bir sonraki kartı gösteren kontrolün çalışması animasyonun tamamlanmasına bağlı olmamalı.

Denemeyi yalnız masaüstü fareyle yapmayın. Klavye ile bağlantılara ulaşın, telefonda metni büyütün ve uzun başlık kullanın. İçerik alanlarının yerleşimini karşılaştırın; sakin sürümde oluşan beklenmedik boşluklar da tasarım hatasıdır. Bu kontrol, bütün erişilebilirlik ölçütlerinin karşılandığını tek başına kanıtlamaz.

Teslim dosyasına iki davranışı da ekleyin

Onaylanan tasarımın yanında küçük bir hareket tablosu tutun: tetikleyici, amaç, normal davranış, sakin karşılık ve gerekiyorsa durdurma kontrolü. Böylece sonradan eklenen kampanya şeridi mevcut yaklaşımı bozmaz. Yeni içerikle de kısa bir kontrol yapılabilir.

Video kullanım rehberimiz medya yükleme ve izleme kararlarını ayrı ele alır. Web tasarım kapsamımızda hareketi, içeriğe ulaşmanın zorunlu şartı haline getirmeden planlayabiliriz. Portföydeki gerçek projeleri incelerken estetik tercih ile doğrulanmış erişilebilirlik sonucunu birbirinden ayırın.