Animasyon ve hareket

Hiç arabaya, tekneye veya uçağa binerken aniden dünyanın döndüğünü hissettiniz mi? Yoksa migren o kadar kötü oldu ki, telefon veya tabletinizdeki sizi "memnun etmek" için oluşturulmuş animasyonlar aniden midenizi bulaştırıyor mu? Ya da belki de her zaman tüm hareket türlerine karşı hassastırsınız, değil mi? Bunlar farklı vestibüler bozukluk türlerine örneklerdir.

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

Birçok kişi vertigoyu tetiklemenin ötesinde, hareket eden, yanıp sönen veya kaydırarak içeriği dikkat dağıtıcı buluyor. DEHB ve diğer dikkat eksikliği bozuklukları olan kişiler, animasyonlu öğelerinizden o kadar dikkatlerini dağıtabilir ki neden web sitenize veya uygulamanıza gittiklerini unutabilirler.

Bu modülde, harekete bağlı her türlü rahatsızlığı olan kişileri daha iyi desteklemeye yardımcı olmanın bazı yöntemlerine göz atacağız.

Yanıp sönen ve hareketli içerik

Animasyon ve hareket oluştururken kendinize öğenin aşırı hareket edip etmediğini sormalısınız. Örneğin, koyudan açık renge titreyen renkler veya ekranda 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ınlar ve gençler arasında daha yaygın olarak görülmektedir.

WCAG'nin yanıp sönme ile ilgili yönergeleri aşağıdakileri tavsiye etmemektedir:

• Herhangi bir saniyede üç defadan fazla yanıp sönüyor
• Genel yanıp sönme ve kırmızı yanıp sönme 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üsü de hastalığa yol açabilir.

Her ekstrem harekette Işığa Duyarlı Epilepsi Analiz Aracı (PEAT) kullanarak test etmeniz gerekir. PEAT, ekrandaki içerik, video veya animasyonların nöbet geçirme olasılığı olup olmadığını belirlemek için kullanabileceğiniz ücretsiz bir araçtır. Tüm içeriklerin PEAT tarafından değerlendirilmesi gerekmez, ancak herhangi bir güvenlik önlemi olarak açık ve koyu arka plan renkleri arasında yanıp sönen veya hızlı geçişler barındıran içerikler değerlendirilmelidir.

Animasyon ve hareketle ilgili kendinize sormanız gereken bir başka 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, hatta mikro hareketleri kaldırmayı düşünü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'in hareketle ilgili yönergelerini uygulamanız gerekir. Yönergelerde, kullanıcıların otomatik olarak başlayan, beş saniyeden uzun süren ve diğer sayfa öğelerinin parçası olan, gerekli olmayan hareket eden, yanıp sönen veya kayan öğeler için hareketleri duraklatması, durdurması veya gizlemesi için bir seçenek oluşturmanız gerektiği belirtilmektedir.

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 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 bir JavaScript anahtarı eklemeyi düşünün. Düğme "hareket kapalı" olarak açıldığında o ekrandaki ve diğer tüm animasyonlar dondurulur.

Medya sorgularını kullanma

Animasyonlarınız konusunda seçici olmanın, kullanıcılarınıza hareketi duraklatma, durdurma, gizleme ve sonsuz animasyon döngülerinden kaçınma seçenekleri sunmanın yanı sıra hareket odaklı bir medya sorgusu da ekleyebilirsiniz. Bu sayede, kullanıcılarınıza ekranda ne olacağı konusunda daha da fazla seçenek sunulur.

@prefers-reduced-motion

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

Kullanıcı, hareketi azaltmak için ekran tercihlerini ayarlayabilir. Bu ayarlar tüm işletim sistemlerinde farklıdır ve olumlu veya olumsuz şekilde çerçevelenmiş olabilir. @prefers-reduced-motion ile bu tercihlere uyan bir site tasarlayabilirsiniz.

MacOS ve Android'de kullanıcı, hareketi azaltmak için ayarı açar. Kullanıcı, MacOS'te Ayarlar > Erişilebilirlik > Ekran'dan 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ı devre dışı bırakması gerekir.

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

Hareket için aşamalı geliştirme

Tasarımcı ve geliştirici olarak varsayılan hareket durumları ve ne kadar hareket göstereceğimiz gibi yapmamız gereken birçok seçenek var. Hareketle ilgili son örneği tekrar inceleyelim.

Animasyonun ekrandaki içeriği anlamak için gereksiz olduğuna karar verdiğimizi varsayalım. Bu durumda, varsayılan durumu tam hareketli sürüm yerine azaltılmış hareket animasyonu olarak ayarlamayı seçebiliriz. Kullanıcılar özel olarak animasyon gösterilmesini istemedikleri sürece animasyonlar kapatılır.

Nöbet, vestibüler ve diğer görsel bozuklukları olan kişilerde hangi hareket seviyesinin sorunlara yol açacağını tahmin edemeyiz. Ekranda gerçekleşen küçük bir hareket bile baş dönmesini, bulanık görüşü veya daha kötüsüne yol açabilir. Bu nedenle, aşağıdaki örnekte varsayılan olarak animasyon yok.

Katmanlı medya sorguları

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

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

Dijital ürünlerimize kullanıcıları memnun etmek için animasyon eklemek eğlenceli olsa da bazı kişilerin bu tasarımlardan etkileneceğini unutmamak çok önemlidir. Hareket hassasiyeti, hafif rahatsızlık hissetmekten zayıflayan bir hastalığa veya nöbete kadar herkesi etkileyebilir.

Ne kadar hareketin fazla olduğunu tahmin etmek yerine, kullanıcının kendisi için en iyi olduğuna karar vermesini sağlamak üzere bir dizi farklı araç kullanabilirsiniz. Örneğin, siteniz veya web uygulamanızda animasyonu açmak veya kapatmak için bir açma/kapatma düğmesi ekleyin. Bu tür bir açma/kapatma düğmesini varsayılan olarak kapalı konuma getirin.

Öğrendiklerinizi sınayın

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