Bir menü açılırken sayfanın geri kalanının büyüyüp küçülmesi, kartların kaydırmada paralaks hareketiyle gelmesi veya düğmeye basınca uzun bir geçişin başlaması arayüze hareket katar. Fakat bazı ziyaretçiler bu hareketi rahatsız edici bulabilir, baş dönmesi yaşayabilir ya da içeriğe odaklanmakta zorlanabilir. Web tasarım kararında yalnız hareketin güzel görünmesi değil, kullanıcının onu azaltabilmesi de düşünülmelidir.

Bu rehber, etkileşimle tetiklenen zorunlu olmayan hareketler için tasarım ve kabul akışı kurar. Her animasyonu kaldırmayı, bütün hareketleri aynı kuralla kapatmayı veya otomatik olarak erişilebilirlik uyumu ilan etmeyi önermez. Amaç; hangi hareketin bilgi ya da işlev için gerekli olduğunu belirlemek, sistemin azaltılmış hareket tercihini gözetmek ve temel görevlerin tercih açıkken de anlaşılır kalmasını sınamaktır.

Önce hareketi envantere çıkarın

Projedeki animasyonları bileşen ve tetikleyiciye göre listeleyin. Menü açılışı, açılır pencere, sekme geçişi, sayfada aşağı inerken beliren kart, kayan bant, yükleme göstergesi ve odak değişimi ayrı satırlarda yer alabilir. Her satırda başlangıç olayı, yaklaşık süre, hareketin yönü, hangi içeriği etkilediği ve kullanıcının göreve devam etmek için ne görmesi gerektiği yazılsın. Böylece “site hareketli” gibi genel bir izlenim yerine, denetlenebilir karar noktaları oluşur.

Animasyonu uygulayan tasarım dosyası, CSS geçişi veya betik sürümü de kayıtla eşleştirilebilir. Üçüncü taraf bileşen hareket ekliyorsa bunu sahibiyle doğrulayın. Kayıt yalnızca dekoratif geçişleri değil, hata bildirimi, seçim durumu ve işlem ilerlemesi gibi anlam taşıyan değişimleri de kapsamalıdır. Bu envanter bir performans raporu değildir; tasarımcının, geliştiricinin ve onay sahibinin aynı hareketten söz etmesini sağlar.

İşlev için gerekli hareketle dekoratif hareketi ayırın

Bir hareket kapatıldığında bilgi, yön veya işlem sonucu kayboluyorsa önce bu bilginin hareketsiz bir yolla sunulup sunulamayacağını sorun. Örneğin bir panelin açıldığını yalnızca kayma animasyonu anlatmamalıdır; panelin görünmesi, başlığının okunması ve odak yönetimi de durumu açıklayabilir. Benzer şekilde seçilmiş sekme, renk geçişine ek olarak seçili durumunu başka bir belirgin işaretle göstermelidir.

Paralaks fon, dekoratif kart girişi veya sayfa çevresindeki süs hareketi çoğu arayüzde temel görevin kendisi değildir. Bunları azaltılmış hareket modunda durdurmak ya da sadeleştirmek düşünülebilir. Bir yükleme göstergesinin animasyonu ise durum bilgisini taşırken beklemenin tek anlatımı olmamalıdır; kısa bir metinsel durum da gerekebilir. “Gerekli” kararı alışkanlığa göre değil, hareket kaldırıldığında kullanıcı hangi bilgiyi kaybediyor sorusuna göre verilir.

Sistem tercihini tasarım kararına bağlayın

W3C’nin WCAG 2.2 açıklaması, etkileşimle başlayan hareket animasyonlarının işlev veya bilgi için gerekli olmadığı durumlarda devre dışı bırakılabilmesine odaklanır. Bu ölçüt AAA düzeyindedir; tek başına tüm sitenin WCAG uyumlu olduğunu göstermez ve her kuruluş için hangi uygunluk seviyesinin geçerli olduğu sonucunu vermez. W3C’nin CSS prefers-reduced-motion tekniği, tarayıcının kullanıcının sistem tercihine ilişkin bildirimini arayüzde değerlendirmek için örnek bir yöntemdir.

Geliştirici bu tercihi destekleyerek animasyonun süresini azaltabilir, paralaks gibi gereksiz konum değişimini kaldırabilir veya geçişi doğrudan son duruma alabilir. Tercih açıkken menünün, onay penceresinin ya da sekmenin işlevi kaybolmamalıdır. Bazı kullanıcılar sistem ayarını değiştirmek istemeyebilir; proje, arayüz içinde hareketi azaltma anahtarı sunmayı da değerlendirebilir. Böyle bir kontrol sunuluyorsa kapsamı ve yeniden ziyaret edildiğinde hatırlanıp hatırlanmayacağı açıkça tanımlanmalıdır.

Azaltılmış modda sadece animasyonu saklamayın

Basitçe bütün geçişleri görünmez yapan genel bir kural, durum değişikliğini de belirsizleştirebilir. Hedef, hareketin kendisini azaltırken bilginin ve etkileşimin devam etmesidir. Bir akordeon aniden açılabilir; ancak başlığın açık olduğu anlaşılır kalmalı, içerik erişilebilir olmalı ve klavye odağı beklenen yere gitmelidir. Kaydırmada ortaya çıkan kart yerinde görünür hâle gelebilir; içeriğin sırası ve bağlantıları korunmalıdır.

Hareket tercihine bağlı stil kuralını bileşen bazında kurun ve var olan tasarım tokenlarıyla yönetin. Bir bileşen kitaplığı kullanılıyorsa, değişikliğin tek sayfada değil tüm kullanım yerlerinde çalıştığını kontrol edin. Ayrıca hareket tercihinin kapalı olduğu durumda varsayılan arayüzü kullanın; test yalnızca azaltılmış modda yapılmamalıdır. Kod incelemesinde hareket ekleyen yeni bileşenlerin bu kurala dahil edilmesi, sonradan düzeltme maliyetini azaltır.

Kullanıcı kontrolünü anlaşılır tasarlayın

Site içinde hareket azaltma kontrolü ekleniyorsa ayar adı ne yaptığına dair açık olmalıdır. Örneğin “Hareketli geçişleri azalt” ifadesi, yalnızca animasyonla yüklenen içeriği kaldıracağını değil, dekoratif hareketi sadeleştireceğini anlatabilir. Kontrol klavyeyle bulunmalı, odaklandığı görünmeli ve değiştiğinde yeni tercih anlaşılır bir durum mesajıyla bildirilebilmelidir. Kullanıcı sayfadan ayrıldığında ayar sıfırlanacak mı, site boyunca mı sürecek; karar ürün davranışı olarak yazılmalıdır.

Tarayıcı ve işletim sistemi tercihi ile site içi anahtar çakışıyorsa öncelik kuralı belirleyin. Kullanıcıya sistem tercihini geçersiz kıldığını ima eden belirsiz metin göstermeyin. Ayar saklanıyorsa hangi teknik yöntemle ve ne kadar süreyle tutulduğu ilgili ürün ve gizlilik değerlendirmesinde ayrıca ele alınır; bu yazı belirli bir saklama yöntemi veya hukuki uyum önerisi vermez. Kişisel tercih kaydı, gereksiz tanımlayıcı bilgiyle birleştirilmemelidir.

Gerçek etkileşim senaryolarıyla kabul testi yapın

Her animasyon türü için aynı görevi iki koşulda deneyin: sistem hareket tercihi normal ve azaltılmışken. Menü açma, sekme değiştirme, form hatasını görme, açılır pencereyi kapatma ve uzun sayfada içerik bulma gibi senaryolar seçin. Her senaryoda tetiklenen hareketi, görünür son durumu, odak sırasını ve ekrandaki açıklamayı not edin. Ekran okuyucu veya yalnız klavye kullanılan akışları, hareket tercihinden bağımsız olarak da test edin.

Test cihazının veya tarayıcının tercihi gerçekten iletip iletmediğini doğrulayın. Sadece geliştirici araçlarında yazılan CSS kuralına bakmak, kullanıcının gerçek ayarının algılandığını kanıtlamaz. Masaüstü ve mobil tarayıcıda sonuçlar farklıysa her davranışı not edin; desteklenmeyen ortam için güvenli ve okunabilir bir varsayılan belirleyin. Hareket kapatıldığında içerik kayboluyor, işlem duruyor veya odak görünmez kalıyorsa kabul verilmeden önce düzeltilmelidir.

Bileşen için beklenen iki durumu yazın

Her envanter satırına “normal hareket” ve “azaltılmış hareket” sonuçlarını yan yana ekleyin. Örneğin açılır pencere açılırken normal koşulda kısa bir solma olabilir; azaltılmış koşulda pencere hemen görünür, başlık okunur ve odak içeride başlar. Kapatma işlemi de iki modda aynı sonucu vermelidir. Bu küçük davranış tanımı, geliştiricinin animasyonu kapatırken etkileşimi yanlışlıkla silmesini önler.

Kabul kaydına tarayıcı, cihaz, ayar, bileşen sürümü, adımlar ve beklenen sonuç alanlarını koyun. Bir ekran görüntüsü durumu gösterebilir ama tek başına odak sırasını veya klavye davranışını kanıtlamaz; testçi sonucu kısa bir notla tamamlamalıdır. Yeni sürümde animasyon süresi değiştiğinde ya da başka bir bileşene geçiş eklendiğinde yalnız görsel inceleme değil, aynı kullanıcı görevi tekrarlanmalıdır. Kayda kimin düzeltme onayı verdiğini ve yeniden test tarihini de ekleyin.

Otomatik başlayan hareketi ayrıca inceleyin

Bu rehber esas olarak kullanıcı etkileşimiyle başlayan animasyonlara odaklanır. Sayfa yüklendiğinde kendiliğinden başlayan ve uzun süre devam eden hareketli içerikler farklı bir değerlendirme gerektirebilir. WCAG’deki durdurma, duraklatma veya gizleme ölçütü ile etkileşimle başlayan animasyon ölçütü aynı şey değildir. Hareket otomatik başlıyorsa başlangıç koşulunu, süresini ve başka içerikle eşzamanlı sunulup sunulmadığını ayrı kaydedin; tasarım incelemesinde ilgili güncel standart metnini kontrol edin.

Bir karusel sürekli dönüyorsa kullanıcıya yalnızca küçük bir duraklatma simgesi koymak yeterli olmayabilir; kontrolün bulunabilir ve kullanılabilir olması gerekir. Otomatik başlama kaldırıldığında temel bilgi kaybolmuyorsa, en basit çözüm hareketi kullanıcı isteğine bağlamak olabilir. Her karar için ürün sahibi ile erişilebilirlik sorumlusu gerekçeyi yazmalı; teknik uygulayıcı kendi başına uygunluk sonucu ilan etmemelidir.

Tasarım ve bakım teslimini hareket kararlarıyla tamamlayın

Teslim paketinde hareket envanteri, hangi bileşenin azaltılmış moda nasıl geçtiği, test senaryosu, karar sahibi ve açık kalan riskler bulunsun. Sonradan eklenen animasyonlar yeni bileşen sürümünde tekrar kontrol edilmelidir. Tasarım sistemi kullanılıyorsa örnek bileşen sayfasında normal ve azaltılmış durumu birlikte gösterin; proje ekibi daha sonra aynı davranışı yeniden kurabilsin. Web tasarım ve yazılım hizmeti kapsamında ölçütler, kabul senaryoları ve sorumluluklar proje görüşmesinde belirlenebilir.

Web erişilebilirliği rehberinde klavye, başlık, form ve görsel alternatifleriyle temel kontroller bulunur. Mobil web tasarım rehberi, küçük ekranda menü ve dokunma davranışlarını ele alır; yayın öncesi kullanıcı turu ise görevleri gerçek arayüzde sınamak için kullanılabilir. Bu rehberlerdeki genel testler, burada tanımlanan hareket tercihi senaryosuna ek olarak düşünülebilir.

Bir animasyonun estetik etkisi tek başına kullanım kalitesini göstermez. Kararı küçük bir envanterle başlatıp gerçek görevlerle doğrulayın; hareket azaltıldığında aynı içeriğe ulaşılabildiğini, işlevin sürdüğünü ve kullanıcı kontrolünün anlaşılır kaldığını görün. Böylece tercih, yalnızca görsel ayar değil, tasarım tesliminde izlenebilir bir davranış olur.

Sık Sorulan Sorular

Azaltılmış hareket tercihi bütün animasyonları kapatmalı mı?

Hayır. Önce hangi hareketin dekoratif, hangisinin bilgi veya işlev taşıdığını belirleyin. Gereksiz hareket sadeleştirilebilir; işlem durumu gibi önemli bilgi ise metin, simge veya belirgin durum değişikliğiyle korunmalıdır. Kullanıcının görevi her iki modda da tamamlanabilmelidir.

prefers-reduced-motion ne yapar?

Bu CSS medya özelliği tarayıcının kullanıcının sistemindeki hareket azaltma tercihine ilişkin bilgisini sorgulamak için kullanılabilir. Tek başına animasyonları otomatik olarak düzenlemez; ekip hangi bileşenin hangi tercihte nasıl davranacağını tanımlayıp gerçek tarayıcı ayarıyla sınamalıdır.

WCAG 2.2’de etkileşim animasyonları ölçütü hangi düzeydedir?

W3C’nin WCAG 2.2 açıklamasında 2.3.3 “Etkileşimle Başlatılan Animasyon” AAA düzeyindedir. Bu bilgi tek başına sitenin genel uygunluk düzeyini veya yasal yükümlülüklerini belirlemez. Proje, hedef standardı ve ilgili ölçütleri kendi bağlamında ayrıca değerlendirmelidir.

Hareketi azaltınca menünün açılma bildirimi nasıl korunur?

Menü anında açılabilir; ancak açık durum görsel olarak ayırt edilmeli, başlık ve içerik erişilebilir kalmalı, odak beklenen yerde bulunmalıdır. Durum yalnızca kayma efektiyle anlatılmamalıdır. Klavye ve ekran okuyucuyla menüyü açma, gezinme ve kapatma senaryolarını sınayın.

Site içinde ayrıca hareket azaltma anahtarı koymak şart mı?

W3C tekniği sistem tercihinden yararlanmayı örnekler; bu yazı her projede belirli bir kontrolün zorunlu olduğu iddiasında bulunmaz. Ek anahtar ürün kararı olarak değerlendirilirse adı, kapsamı, klavye kullanımı, tercih kalıcılığı ve sistem ayarıyla ilişkisi açıkça tasarlanmalıdır.

Animasyonu kapatınca tüm içerik görünür yapmak yeterli mi?

Her zaman değil. Odak sırası, seçili durum, hata bildirimi, işlem ilerlemesi ve katmanların kapanması da çalışmalıdır. İçeriği görünür yapmak görev tamamlandı anlamına gelmez. Normal ve azaltılmış hareket koşulunda aynı kullanıcı görevini baştan sona deneyip sonucu kaydedin.

Sayfa açılır açılmaz başlayan karusel bu ölçütle mi incelenir?

Bu yazının ana konusu etkileşimle tetiklenen hareketlerdir. Kendiliğinden başlayan ve süren içerik farklı bir WCAG ölçütü kapsamında değerlendirilebilir. Başlangıç, süre ve eşzamanlı içerik koşullarını kaydedin; güncel standart metni ve uygun kontrolü proje sorumlularıyla inceleyin.

Azaltılmış hareket modunu yalnız masaüstünde test etmek yeterli mi?

Hayır. Kullanılan cihaz ve tarayıcıların sistem tercihini iletip iletmediğini kontrol edin; masaüstü ve mobilde gerçek görevleri tekrarlayın. Ekran boyutu, dokunma, klavye ve odak davranışı değişebilir. Destek farklılığı varsa okunabilir ve güvenli varsayılan davranışı da kabul kapsamına alın.