Animasyon ve hareket

Hiç arabada, teknede veya uçakta yolculuk yaparken aniden dünyanın döndüğünü hissettiniz mi? Ya da telefonunuzda veya tabletinizde sizi "eğlendirmek" için oluşturulan animasyonlar, migreniniz o kadar kötü olduğunda birden bire midenizi mi bulandırıyor? Belki de her türlü harekete karşı her zaman hassas olmuşsunuzdur. Bunlar, farklı türlerdeki vestibüler bozukluklara örneklerdir.

40 yaşına kadar yetişkinlerin% 35'inden fazlası bir tür vestibüler disfonksiyon yaşamış olur. Bu durum geçici baş dönmesine, migren kaynaklı vertigo'ya veya daha kalıcı bir vestibüler engelliliğe yol açabilir.

Baş dönmesini tetiklemesinin yanı sıra birçok kişi hareket eden, yanıp sönen veya kaydırılan içeriklerin dikkat dağıtıcı olduğunu düşünüyor. ADHD ve diğer dikkat eksikliği bozuklukları olan kişiler, animasyonlu öğeleriniz tarafından o kadar çok dikkatleri dağılabilir ki web sitenize veya uygulamanıza neden gittiklerini unutabilirler.

Bu modülde, hareket kaynaklı her türlü rahatsızlığı olan kullanıcılara daha iyi destek olmanın bazı yollarını ele alacağız.

Yanıp sönen ve hareket eden içerik

Animasyon ve hareket oluştururken öğenin hareketinin aşırı olup olmadığını kendinize sorun. Örneğin, renklerin koyudan açığa titremesi veya ekrandaki hızlı hareketler, ışığa duyarlı epilepsisi olan kişilerde nöbetlere neden olabilir. Epilepsili kişilerin% 3'ünün ışığa duyarlılıktan muzdarip olduğu tahmin edilmektedir. Bu durum kadınlarda ve gençlerde daha yaygındır.

WCAG'nin yanıp sönmeyle ilgili yönergelerinde aşağıdakilerin yapılmaması önerilir:

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

Bu flaşlar en iyi ihtimalle web sayfasının kullanılamamasına, en kötü ihtimalle ise hastalığa yol açabilir.

Herhangi bir aşırı hareket için Photosensitive Epilepsy Analysis Tool (PEAT)'i kullanarak testi yapmanız zorunludur. PEAT, ekran içeriğinin, videonun veya animasyonların nöbete 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 yanıp sönen veya açık ve koyu arka plan renkleri arasında hızlı geçişler içeren içerikler, güvenlik açısından değerlendirilmelidir.

Animasyon ve hareketle ilgili olarak 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ırmayı düşünebilirsiniz.

Öğenin hareketinin gerekli olmadığını ancak kullanıcının genel deneyimini iyileştirebileceğini düşünüyorsanız veya başka bir nedenle hareketi kaldıramıyorsanız bu seçeneği kullanın. Bu durumda, WCAG'nin hareketle ilgili yönergelerini uygulamanız gerekir. Kurallarda, kullanıcıların aşağıdaki hareketleri duraklatmasına, durdurmasına veya gizlemesine olanak tanıyan bir seçenek oluşturmanız gerektiği belirtilir: 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 kayan öğeler.

Hareketi duraklatma, durdurma veya gizleme

Sayfanıza duraklatma, durdurma veya gizleme mekanizması ekleyerek kullanıcıların sorun yaratabilecek hareketli animasyonları devre dışı bırakmasına olanak tanıyın. Bu işlemi ekran düzeyinde veya öğe düzeyinde yapabilirsiniz.

Örneğin, dijital ürününüzde çok sayıda animasyon olduğunu varsayalım. Kullanıcıların deneyimlerini kontrol etmelerine olanak tanımak için erişilebilir bir JavaScript açma/kapatma düğmesi eklemeyi düşünebilirsiniz. Düğme "hareket kapalı" konumuna getirildiğinde, o ekranda ve diğer tüm ekranlarda animasyonlar dondurulur.

Medya sorgularını kullanma

Animasyonlarınızı seçici bir şekilde kullanmanın, kullanıcılarınıza duraklatma, durdurma ve hareketi gizleme seçenekleri sunmanın ve sonsuz animasyon döngülerinden kaçınmanın yanı sıra harekete odaklanan bir medya sorgusu da ekleyebilirsiniz. Bu sayede kullanıcılarınız, ekranda gösterilen içerikler konusunda daha fazla seçeneğe sahip olur.

@prefers-reduced-motion

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

Kullanıcılar, hareketi azaltmak için ekran tercihlerini ayarlayabilir. Bu ayarlar işletim sistemlerine göre farklılık gösterir ve olumlu ya da olumsuz şekilde çerçevelenebilir. @prefers-reduced-motion ile bu tercihlere saygı duyan bir site tasarlayabilirsiniz.

macOS ve Android'de kullanıcı, hareketi azaltmak için bu ayarı etkinleştirir. macOS'te kullanıcılar, Ayarlar > Erişilebilirlik > Ekran'da Hareketi azalt'ı ayarlayabilir. Android'deki ayar Animasyonları kaldır'dır. Windows'da bu ayar, varsayılan olarak etkin olan Animasyonları göster şeklinde olumlu bir ifadeyle belirtilir. Kullanıcıların hareketi azaltmak için bu ayarı kapatması gerekir.

Hareketle ilgili sorun yaşayan kişilerin erişilebilirliğini sağlamak için WCAG 2.0 AA yönergelerinde belirtilen 5 saniyelik eşikten daha kısa animasyonlara bile dikkatli yaklaşılmalıdır. En güvenilir yöntem ise animasyonlar üzerinde özel kontrol sağlayarak hareket azaltma tercihini belirten kullanıcılara güç vermektir. Bu sayede kullanıcılar, oynatma ve duraklatma düğmesi gibi özel kontrolleri kullanarak animasyonu başlatabilir ve durdurabilir.

Hareket için progresif geliştirme

Tasarımcılar ve geliştiriciler olarak, varsayılan hareket durumları ve ne kadar hareket gösterileceği de dahil olmak üzere yapmamız gereken birçok seçim var. Hareketle ilgili son örneği tekrar inceleyin.

Ekranda gösterilen içeriğin anlaşılması için animasyonun gereksiz olduğuna karar verdiğimizi varsayalım. Bu durumda, varsayılan durumu tam hareketli sürüm yerine azaltılmış hareketli animasyon olarak ayarlamayı seçebiliriz. Kullanıcılar özellikle animasyon istemediği sürece animasyonlar devre dışı bırakılır.

Nöbet, vestibüler ve diğer görsel bozuklukları olan kişilerde hangi düzeydeki hareketin sorunlara neden olacağını tahmin edemeyiz. Ekranda çok az hareket olması bile baş dönmesine, bulanık görmeye veya daha kötü sorunlara yol açabilir. Bu nedenle, aşağıdaki örnekte varsayılan olarak animasyon kullanılmaz.

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 hizmetlerini birlikte kullanalım.

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

Kullanıcıları memnun etmek için dijital ürünlerimize animasyon eklemek eğlenceli olsa da bazı kişilerin bu tasarımlardan etkileneceğini unutmamamız gerekir. Hareket hassasiyeti, hafif rahatsızlık hissinden sakatlayıcı bir hastalığa veya nöbete kadar herkesi etkileyebilir.

Ne kadar hareketin çok fazla olduğunu tahmin etmek yerine, kullanıcının kendisi için en iyisine karar vermesine olanak tanıyan çeşitli araçlar kullanabilirsiniz. Örneğin, sitenizde veya web uygulamanızda 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ı tutmayı düşünebilirsiniz.