Animasyon ve hareket

Araba, tekne veya uçak kullanırken aniden dünyanın döndüğünü hissettiniz mi? Ya da sizi "memnun etmek" için tasarlanmış telefon veya tabletinizdeki animasyonlar yüzünden aniden migreniniz mi tuttu? Yoksa her zaman tüm hareket türlerine karşı hassas mısınız? Bunlar, farklı vestibüler bozukluk türlerine örnektir.

40 yaşına kadar yetişkinlerin %35'inden fazlası bir çeşit vestibüler işlev bozukluğu yaşamıştır. Bu da geçici baş dönmesine, migrene bağlı baş dönmesine veya daha kalıcı vestibüler engelliliğe yol açabilir.

Birçok kişi, hareketli, yanıp sönen veya kaydırılan içeriklerin dikkat dağıtıcı olduğunu düşünüyor. DEHB ve diğer dikkat eksikliği bozukluklarına sahip kullanıcılar, animasyonlu öğelerinizden o kadar rahatsız olabilir ki web sitenize veya uygulamanıza neden geldiklerini bile unutabilirler.

Bu modülde, hareketle tetiklenen tüm bozukluk türlerine sahip kullanıcılara daha iyi destek sağlamanın bazı yollarına göz atacağız.

Yanıp sönen ve hareketli içerik

Animasyon ve hareket oluştururken, kendinize öğenin aşırı hareket olup olmadığını sorun. Örneğin, karanlıktan aydınlığa yanıp sönen renkler veya ekrandaki hızlı hareketler, ışığa duyarlı epilepsisi olan kişilerde nöbetlere neden olabilir. Epilepsi hastalarının %3'ünün ışığa duyarlılıktan muzdarip olduğu tahmin edilmektedir. Bu durum kadınlarda ve genç insanlarda daha yaygındır.

WCAG'nin yanıp sönmeyle ilgili yönergeleri aşağıdakileri önermez:

• Bir saniye içinde üçten fazla yanıp söner.
• Genel flaş ve kırmızı flaş eşiğinin altında yanıp söner.

Bu yanıp sönmeler en iyi ihtimalle bir web sayfasının kullanılamamasına, en kötü ihtimalle de hastalığa yol açabilir.

Aşırı hareketlerde Işığa Duyarlı Epilepsi Analiz Aracı (PEAT) kullanarak test etmeniz gerekir. PEAT, ekrandaki içeriğin, videonun veya animasyonların nöbetlere neden olma olasılığını belirlemek için kullanılan ücretsiz bir araçtır. Tüm içeriklerin PEAT tarafından değerlendirilmesi gerekmez ancak güvenli olması için açık ve koyu arka plan renkleri arasında yanıp sönen veya hızlı geçişler içeren içerikler değerlendirilmelidir.

Animasyon ve hareketle ilgili kendinize sormanız gereken bir diğer soru da öğenin hareketinin ekrandaki içeriği veya işlemleri anlamak için gerekli olup olmadığıdır. Gerekli değilse oluşturduğunuz veya tasarladığınız öğeden tüm hareketleri (mikro hareketler dahil) kaldırın.

Öğenin hareketinin gerekli olmadığını ancak kullanıcının genel deneyimini iyileştirebileceğini veya hareketi başka bir nedenle kaldıramayacağınızı varsayalım. Bu durumda WCAG'nin hareketle ilgili yönergelerine uymanız gerekir. Kurallar, kullanıcıların hareketi duraklatması, durdurması veya gizlemesi için bir seçenek oluşturmanız gerektiğini belirtir. Bu hareketler; otomatik olarak başlayan, beş saniyeden uzun süren ve diğer sayfa öğelerinin parçası olan, gerekli olmayan hareketli, yanıp sönen veya kaydırılan öğelerdir.

Hareketi duraklatma, durdurma veya gizleme

Kullanıcıların sorunlu olabilecek hareket animasyonlarını kapatmasına olanak tanımak için sayfanıza bir duraklatma, durdurma veya gizleme mekanizması ekleyin. Bu işlemi ekran düzeyinde veya öğe düzeyinde yapabilirsiniz.

Örneğin, dijital ürününüzün çok sayıda animasyon içerdiğini varsayalım. Kullanıcıların deneyimlerini kontrol etmelerine olanak tanımak için erişilebilir JavaScript açma/kapatma düğmesi ekleyebilirsiniz. Düğme "hareket kapalı" seçeneğine getirildiğinde, hem söz konusu ekranda hem de diğer tüm animasyonlar dondurulur.

Medya sorgularını kullanma

Animasyonlarınız konusunda seçici davranmanın, kullanıcılarınıza duraklatma, durdurma, hareketi gizleme ve sonsuz animasyon döngülerinden kaçınma seçenekleri sunmanın yanı sıra hareket odaklı bir medya sorgusu eklemeyi de düşünebilirsiniz. Bu sayede kullanıcılarınız ekranda gösterilenlerle ilgili daha fazla seçeneğe sahip olur.

@prefers-reduced-motion

Renk modülündeki renk odaklı medya sorgularına benzer şekilde @prefers-reduced-motionmedya sorgusu, animasyonla ilgili kullanıcı işletim sistemi ayarlarını kontrol eder.

Kullanıcı, hareketi azaltmak için görüntü tercihleri ayarlayabilir. Bu ayarlar işletim sistemlerine göre farklılık gösterir ve olumlu veya olumsuz şekilde çerçevelenebilir. @prefers-reduced-motion ile bu tercihlere saygı gösteren bir site tasarlayabilirsiniz.

macOS ve Android'de kullanıcı, hareketi azaltmak için ayarı etkinleştirir. macOS'te kullanıcılar Ayarlar > Erişilebilirlik > Ekran bölümünde Hareketi azalt'ı ayarlayabilir. Android'in ayarı Animasyonları kaldır'dır. Windows'da bu ayar, varsayılan olarak açık olan Animasyonları göster şeklinde pozitif bir şekilde çerçevelenir. Hareketi azaltmak için kullanıcının bu ayarı kapatması gerekir.

Alternatif olarak, sonraki örnek gruplarında gösterildiği gibi, tüm animasyonlarınızı sonsuz bir döngüde oynatmak yerine beş saniye veya daha kısa sürede hareket etmeyi durduracak şekilde kodlayabilirsiniz.

Hareket için progresif geliştirme

Tasarımcı ve geliştirici olarak, varsayılan hareket durumları ve ne kadar hareketin gösterileceği gibi birçok seçim yapmamız gerekir. Hareketle ilgili son örneği tekrar inceleyin.

Animasyonun, ekrandaki içeriği anlamak için gerekli olmadığına karar verdiğimizi varsayalım. Bu durumda, varsayılan durumu tam hareketli sürüm yerine azaltılmış hareketli animasyon olarak ayarlayabiliriz. Kullanıcılar animasyon isteğinde bulunmadığı sürece animasyonlar devre dışı bırakılır.

Nasıl bir hareket düzeyinin nöbet, vestibüler ve diğer görsel bozuklukları olan kişilerde soruna neden olacağını tahmin edemeyiz. Ekrandaki küçük bir hareket bile baş dönmesi, bulanık görme veya daha kötü durumlara neden olabilir. Bu nedenle, aşağıdaki örnekte varsayılan olarak animasyon yok.

Katmanlı medya sorguları

Kullanıcılarınıza daha fazla seçenek sunmak için birden fazla medya sorgusu kullanabilirsiniz. @prefers-color-scheme, @prefers-contrast ve @prefers-reduced-motion'yi birlikte kullanalım.

Kullanıcılarınızın seçmelerine izin verin

Kullanıcıları memnun etmek için dijital ürünlerimizde animasyon kullanmak eğlenceli olsa da bazı kullanıcıların bu tasarımlardan etkileneceğini unutmamamız önemlidir. Hareket hassasiyeti herkesi etkileyebilir. Rahatsızlık veren bir hastalık veya nöbet geçirmeye kadar görebilir.

Ne kadar hareketin fazla olduğunu tahmin etmek yerine, kullanıcının kendisi için en iyi olana karar vermesine olanak tanımak amacıyla çeşitli araçlar kullanabilirsiniz. Örneğin, sitenizdeki veya web uygulamanızdaki animasyonu etkinleştirmek ya da devre dışı bırakmak için bir açma/kapatma düğmesi ekleyin. Bu tür bir açma/kapatma düğmesini varsayılan olarak kapalı olarak ayarlayabilirsiniz.

Öğrendiklerinizi sınayın

Hareket ve animasyon erişilebilirliği hakkındaki bilginizi test edin.