Erişilebilir Hareket: Anlamını Kaybetmeden, azaltılmış hareketi tercih edecek şekilde tasarlama
Azaltılmış hareket ayarlarına ve vestibüler bozukluklara saygılı hareket nasıl tasarlanır: WCAG'in gerektirdiği, neyin çıkarılacağı, neyin saklanacağı ve nasıl test edileceği.
Ana nokta
Kullanıcı azaltılmış hareketi açtığında, her animasyonun anlamını koruyun ancak hareketi kaldırın: slaytları, yakınlaştırmaları ve paralaksı kısa geçişlerle veya anlık değişikliklerle değiştirin, otomatik oynatma döngülerini durdurun ve bir şeyi iletmek için asla yalnızca harekete güvenmeyin. Web'de, azaltılmış hareketi tercih eden ortam sorgusuyla ayarı tespit edin.
Neden önemli?
Bazı insanlar için ekrandaki hareket bir zevk meselesi değildir. W3C, animasyonun mide bulantısı, migren ve ciddi vakalarda iyileşmek için yatak istirahatine ihtiyaç duyan reaksiyonlarla vestibüler bozuklukları tetikleyebileceğini belirtiyor. İşletim sistemleri insanların daha az hareket istemesine olanak tanıyor ve web üzerinde bu istek, azaltılmış hareketi tercih eden medya sorgusu olarak gösteriliyor. Kullanıcı ayarı açtığında değeri azalır.
WCAG'in istediği şey
İki WCAG başarı kriteri hareketi kapsar. 2.2.2 Duraklat, Durdur, Gizle, atlı karıncalar ve döngü animasyonu gibi otomatik olarak başlayan hareketler için geçerlidir ve onu duraklatmak, durdurmak veya gizlemek için bir yol gerektirir. 2.3.3 Etkileşimlerden Animasyon (AAA düzeyi), kullanıcı etkileşimi tarafından tetiklenen hareket için geçerlidir ve gereksiz animasyondan kaçınmayı, onu kapatmak için bir kontrol sunmayı veya işletim sisteminin hareketi azaltma ayarını kullanmayı önerir. AAA'nın gerekli olmadığı durumlarda bile buna uymak iyi bir uygulamadır.
Hareketi kaldırın, anlamı koruyun
Hareketin azalması geri bildirimin olmadığı anlamına gelmez. Bir düğmeye basan kullanıcının yine de onun çalıştığını bilmesi gerekir. Amaç durum değişikliğini sürdürmek ve seyahati bırakmaktır.
- Kaldırın veya azaltın: büyük slaytlar, yakınlaştırmalar, paralaks, kaydırma bağlantılı hareket, dönme, otomatik oynatma döngüleri ve arka plan videosu.
- Tut: renk ve opaklık değişiklikleri, odak göstergeleri, kısa durum geçişleri, ilerleme bilgileri.
- Değiştir: kısa geçişli veya anında değişimli sayfa ve panel geçişleri.
- Asla: Bir hatayı, değişikliği veya yeni bir öğeyi göstermenin tek yolu olarak hareketi kullanmayın.
Uygulamak
Web'de, gerekli olmayan hareketi @media içine sarın (azaltılmış hareketi tercih eder: tercih yok) veya @media içinde geçersiz kılın (azaltılmış hareketi tercih eder: azalt). JavaScript'te window.matchMedia('(prefers-reduced-motion: azalt)') dosyasını okuyun ve değişiklikleri dinleyin. Yerel platformlar aynı ayarı sunar: SwiftUI, UIKit ve Android'in tümü bunu kontrol etmenize olanak tanır. Tasarım sisteminizde hareket belirteçleri varsa her bileşenin aynı şekilde davranması için her biri için azaltılmış bir değişken tanımlayın.
Test
İşletim sisteminizde azaltılmış hareketi açın ve her tuş akışını gözden geçirin. Önemli hiçbir şeyin kaybolmadığından, hiçbir döngünün otomatik olarak başlamadığından ve kaydırmanın, içeriği kaydırmanın kendisinin yaptığı hareketin ötesine taşımadığından emin olun. Tarayıcı geliştirici araçları da ayarı taklit edebilir.
Üretim için uygulama örneği
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Hatırlanacak temel ilkeler
- Hareket bazı insanları fiziksel olarak hasta edebilir; ortama saygı göster
- Seyahat, yakınlaştırma, paralaks ve otomatik oynatmayı kaldırın; durum değişikliklerini ve geri bildirimleri sakla
- WCAG 2.2.2 otomatik hareketi kapsar; 2.3.3 etkileşimden kaynaklanan hareketi kapsar
- Ayarı, azaltılmış hareketi tercih ederek ve her yerel platformda tespit edin
- Her hareket jetonu için azaltılmış bir varyant tasarlayın
Sık sorulan sorular
Kaynaklar
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Web Belgeleri
- Motion — Apple İnsan Arayüzü Yönergeleri