Kullanıcıların Hareket Tercihlerine Saygı

Web'de hareketle çalışırken, herkesin bunu aynı şekilde deneyimlemediğini düşünmek önemlidir. Bazılarına pürüzsüz ve kaygan gelen şeyler, başkaları için can sıkıcı veya dikkat dağıtıcı olabilir - veya daha kötüsü, hastalık hissine neden olabilir ve hatta nöbetlere neden olabilir. Çok hareketli web siteleri ayrıca mobil cihazların pil ömrü üzerinde daha fazla etkiye sahip olabilir veya daha fazla verinin kullanılmasına neden olabilir (örneğin, otomatik olarak oynatılan videolar, statik bir görüntüden daha fazla kullanıcı verisi gerektirir). Bunlar, hareketli sitelerin herkes için arzu edilmemesinin nedenlerinden sadece birkaçı.

Çoğu yeni işletim sistemi, kullanıcının hareket tercihlerini sistem düzeyindeki ayarlarda belirlemesine olanak tanır. Tercih edilen prefers-reduced-motion ortam sorgusu (Seviye 5 Medya Sorguları özelliğinin bir parçası), kullanıcıların sistem düzeyindeki hareket tercihlerini algılamamıza ve buna uygun CSS stilleri uygulamamıza olanak tanır.

Tercihler prefers-reduced-motion için iki seçenek, reduce veya no-preference . Kullanıcı açıkça azaltılmış hareket için bir tercih ayarladıysa, bir öğenin animasyonunu kapatmak için CSS'mizde aşağıdaki şekilde kullanabiliriz:

 .some-element { animation: bounce 1200ms; } @media (prefers-reduced-motion: reduce) { .some-element { animation: none; } }

Tersine, animasyonu yalnızca kullanıcının hareket tercihi yoksa ayarlayabiliriz. Bu, yazmamız gereken kod miktarını azaltma avantajına sahiptir ve kullanıcıların hareket tercihlerini karşılamayı unutacağımız anlamına gelir:

 @media (prefers-reduced-motion: no-preference) { .some-element { animation: bounce 1200ms; } }

Ek bir avantaj, prefers-reduced-motion desteklemeyen eski tarayıcıların kuralı görmezden gelmesi ve yalnızca orijinal, hareketsiz öğemizi görüntülemesidir.

Hangi Kural?

Az ya da çok yerleşik fikir birliğinin mobil öncelikli olduğu (dolayısıyla min-width tercih edilir) min-width ve max-width medya sorgularının aksine, azaltılmış hareketli stillerinizi yazmanın tek bir "doğru" yolu yoktur . Yukarıda listelenen nedenlerden dolayı ikinci örneği tercih etme eğilimindeyim (animasyonları yalnızca prefers-reduced-motion: no-preference doğru olarak değerlendiriyorsa uygulamak). Tatiana Mac, geliştiricilerin almayı düşünebilecekleri bazı yaklaşımları ve web üzerinde hareketle tasarım yaparken sorulacak önemli sorular da dahil olmak üzere birçok başka harika noktayı kapsayan bu mükemmel makaleyi yazdı.

Her zaman olduğu gibi, ekip iletişimi ve tutarlı bir strateji , web erişilebilirliği söz konusu olduğunda tüm temellerin kapsanmasını sağlamanın anahtarıdır.

Pratik Kullanım: Kaydırma Davranışı için prefers-reduced-motion

prefers-reduced-motion , ana kare animasyonlarını veya geçişlerini uygulamanın (veya uygulamamanın) ötesinde birçok uygulamaya sahiptir. Bir örnek düzgün kaydırmadır. scroll-behaviour: smooth html öğemizde ayarlarsak, bir kullanıcı sayfa içi bağlantı bağlantısını tıkladığında sayfadaki uygun konuma sorunsuz bir şekilde kaydırılır ( şu anda Safari'de desteklenmemektedir ):

 html { scroll-behavior: smooth; }

Ne yazık ki, CSS'de şu anda bu davranış üzerinde fazla kontrole sahip değiliz. Uzun bir içerik sayfamız varsa, sayfa çok hızlı kayar, bu da hareket hassasiyeti olan biri için oldukça tatsız bir deneyim olabilir. Bir medya sorgusuna sararak, kullanıcının reduced-motion tercihine sahip olduğu durumlarda bu davranışın uygulanmasını önleyebiliriz :

 @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

Javascript'te Hareket Tercihleri ​​İçin Catering

Bazen CSS yerine JavaScript'te hareket uygulamamız gerekir. matchMedia kullanarak JS ile bir kullanıcının hareket tercihlerini benzer şekilde tespit edebiliriz. JS kodumuzda koşullu olarak düzgün kaydırma davranışını nasıl uygulayabileceğimizi görelim:

 /* Set the media query */ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') button.addEventListener('click', () => { /* If the media query matches, set scroll behavior variable to 'auto', otherwise set it to 'smooth' */ const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth' /* When the button is clicked, the user will be scrolled to the top */ window.scrollTo({ x: 0, y: 0, behavior }) })

Aynı ilke, JS kitaplıklarıyla hareket açısından zengin kullanıcı arabirimlerinin uygulanıp uygulanmayacağını veya hatta kitaplıkların kendilerinin yüklenip yüklenmeyeceğini saptamak için kullanılabilir.

Aşağıdaki kod parçacığında, kullanıcı azaltılmış hareketi tercih ederse işlev erken döner ve gereksiz büyük bir bağımlılığın içe aktarılmasını önler - kullanıcı için bir performans kazancı. Hareket tercihi ayarlanmamışsa, Greensock animasyon kitaplığını dinamik olarak içe aktarabilir ve animasyonlarımızı başlatabiliriz.

 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') const loadGSAPAndInitAnimations = () => { /* If user prefers reduced motion, do nothing */ if (prefersReducedMotion.matches) return /* Otherwise, import the GSAP module and initialize animations */ import('gsap').then((object) => { const gsap = object.default /* Initialize animations with GSAP here */ }) } loadGSAPAndInitAnimations()

reduced-motion Hareketsizlik anlamına gelmez

Azaltılmış hareket tercihleri ​​için stil oluştururken, yine de kullanıcıya bir eylemin ne zaman gerçekleştiğine dair anlamlı ve erişilebilir göstergeler sağlamamız önemlidir. Örneğin, azaltılmış hareketi tercih eden kullanıcılar için dikkat dağıtan veya yoğun hareket içeren bir vurgulu durumu kapatırken, kullanıcının öğenin üzerinde gezindiği durumlar için net bir alternatif stil sağlamaya özen göstermeliyiz.

Aşağıdaki demo, hareket tercihi ayarlanmamışsa, kullanıcı fareyle üzerine geldiğinde veya bir galeri öğesine odaklandığında ayrıntılı bir geçiş gösterir. Azaltılmış hareketi tercih ederlerse, geçiş daha belirsizdir, ancak yine de vurgulu durumunu açıkça gösterir:

Azaltılmış hareket, web sayfamızdan tüm dönüşümleri kaldırmak anlamına da gelmez. Örneğin, fareyle üzerine gelindiğinde birkaç pikseli hareket ettiren küçük bir ok simgesine sahip bir düğmenin, azaltılmış hareket deneyimini tercih eden biri için sorun yaratması olası değildir ve yalnızca renkten ziyade bir durum değişikliğinin daha kullanışlı bir göstergesini sağlar.

Bazen geliştiricilerin, tüm öğelerdeki tüm geçişleri ve animasyonları ortadan kaldıran aşağıdaki şekilde azaltılmış hareket stilleri uyguladığını görüyorum:

 @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

Bu, kullanıcıların hareket tercihlerini göz ardı etmekten tartışmasız daha iyidir, ancak gerektiğinde daha ince geçişler sağlamak için öğeleri kolayca uyarlamamıza izin vermez.

Aşağıdaki kod parçacığında, fareyle üzerine gelindiğinde ölçeği büyüyen bir düğmemiz var. Renkleri ve ölçeği değiştiriyoruz, ancak azaltılmış hareketi tercih eden kullanıcılar hiçbir geçiş almayacak:

 button { background-color: hotpink; transition: color 300ms, background-color 300ms, transform 500ms cubic-bezier(.44, .23, .47, 1.27); } button:hover, button:focus { background-color: darkviolet; color: white; transform: scale(1.2); } @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } button { /* Even though we would still like to transition the colors of our button, the following rule will have no effect */ transition: color 200ms, background-color 200ms; } button:hover, button:focus { /* Preventing the button scaling on hover */ transform: scale(1); } }

Etkisini görmek için bu demoya göz atın. Bu, belki de ideal değildir, çünkü geçiş olmadan ani renk geçişi, birkaç yüz milisaniyelik bir geçişten daha sarsıcı hissettirebilir. Bu, genel olarak, genellikle duruma göre azaltılmış hareket için stil vermeyi tercih etmemin bir nedenidir.

İlgileniyorsanız, bu, gerektiğinde geçişi özelleştirmeye izin vermek için yeniden düzenlenmiş aynı demodur. Geçiş süresi için, tüm bildirimi yeniden yazmak zorunda kalmadan ölçek geçişini açıp kapatmamıza izin veren özel bir özellik kullanır.

Animasyonu Kaldırırken Daha İyi

Eric Bailey, "Revisiting tercih-düşük-hareket, azaltılmış hareketli medya sorgusu" makalesinde "web'e erişebilen her cihaz aynı zamanda animasyon oluşturamaz veya animasyonu sorunsuz bir şekilde oluşturamaz" noktasını gündeme getiriyor. Çarpık animasyonlara neden olabilen düşük yenileme hızına sahip cihazlar için, aslında animasyonun kaldırılması tercih edilebilir . update medyası özelliği bunu belirlemek için kullanılabilir:

 @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

Erişilebilirlik alanında takip edilecek birinci sınıf bir kişi olduğundan Eric'in önerileri için makalenin tamamını okuduğunuzdan emin olun.

Tüm Parçaların Toplamı

Bileşen düzeyinde CSS'ye bu kadar sıkı odaklanırken genel sayfa tasarımını akılda tutmak önemlidir. Bileşen düzeyinde oldukça zararsız görünen bir animasyon, sayfa boyunca tekrarlandığında çok daha büyük bir etkiye sahip olabilir ve birçok hareketli parçadan biridir.

Tatiana'nın makalesinde, yalnızca (prefers-reduced-motion: no-preference) true olarak değerlendirilirse yüklenebilen tek bir CSS dosyasında animasyonları ( prefers-reduced-motion ile) düzenlemeyi önerir. Tüm animasyonlarımızın toplamını görmek, siteyi bir bütün olarak ziyaret etme deneyimini görselleştirmemize ve azaltılmış hareketli stillerimizi buna göre uyarlamamıza yardımcı olma avantajına sahip olabilir.

Açık Hareket Geçişi

prefers-reduced-motion yararlı olsa da, yalnızca sistem ayarlarında bu özelliğin farkında olan kullanıcılara hizmet verme dezavantajına sahiptir. Pek çok kullanıcı bu ayar hakkında bilgi sahibi değilken, diğerleri sistem düzeyindeki ayarlara erişimi olmayan ödünç alınmış bir bilgisayar kullanıyor olabilir. Yine de diğerleri, sitelerin büyük çoğunluğu için hareketten memnun olabilir, ancak yoğun hareket kullanımına sahip siteleri taşıması zor bulabilir.

Sadece bir siteyi ziyaret etmek için sistem tercihlerinizi ayarlamak zorunda kalmak can sıkıcı olabilir. Bu nedenlerle, bazı durumlarda, hareketi açıp kapatmak için sitenin kendisinde açık bir kontrol sağlamak tercih edilebilir. Bunu JS ile uygulayabiliriz.

Aşağıdaki demo, arka planda sürüklenen birkaç daireye sahiptir. İlk animasyon stilleri kullanıcının sistem tercihlerine göre belirlenir (tercihler prefers-reduced-motion ile), ancak kullanıcı bir düğme aracılığıyla hareketi açıp kapatabilir. Bu, seçilen tercihe göre stilleri ayarlamak için kullanabileceğimiz body öğesine bir sınıf ekler. Bonus olarak, hareket tercihi seçimi de yerel depolamada korunur - bu nedenle kullanıcı bir sonraki ziyaretinde "hatırlanır".

Özel Özellikler

Demodaki bir özellik, geçişin, animasyonları oynatmak veya duraklatmak için kullanabileceğimiz --playState adlı özel bir özelliği ayarlamasıdır. Bu, özellikle aynı anda birkaç animasyonu duraklatmanız veya oynatmanız gerektiğinde kullanışlı olabilir. Her şeyden önce, oynatma durumunu paused olarak ayarladık:

 .circle { animation-play-state: var(--playState, paused); }

Kullanıcı sistem ayarlarında azaltılmış hareket için bir tercih ayarladıysa, oynatma durumunu running olarak ayarlayabiliriz:

 @media (prefers-reduced-motion: no-preference) { body { --playState: running; } }

Not: Bunu, bireysel öğenin aksine body üzerinde ayarlamak, özel özelliğin devralınabileceği anlamına gelir.

Kullanıcı açma/kapama düğmesini tıkladığında, body üzerinde özel özellik güncellenir ve bu, kullanıldığı tüm örnekleri değiştirir:

 // This will pause all animations that use the `--playState` custom property document.body.style.setProperty('--playState', 'paused')

Bu, her durumda ideal çözüm olmayabilir, ancak bir avantajı, kullanıcı geçiş düğmesine tıkladığında, oldukça sarsıcı olabilecek ilk durumuna geri dönmek yerine animasyonun basitçe duraklamasıdır .

Geçişin erişilebilirliğini iyileştirmeye yönelik önerileri için Scott O'Hara'ya özel teşekkürler. Bazı ekran okuyucuların, bir kullanıcı düğmeyi tıkladığında değişen güncellenmiş düğme metnini duyurmadığını ve bunun yerine düğmede aria-checked açık veya kapalı olarak on veya off olarak önerilen role="switch" önerdi.

Video Bileşeni

Bazı durumlarda, bileşen düzeyinde hareketi değiştirmek daha iyi bir seçenek olabilir. Otomatik oynatılan video arka planına sahip bir web sayfası alın. Videonun, azaltılmış hareket tercihi olan kullanıcılar için otomatik olarak oynatılmamasını sağlamalıyız, ancak yine de , yalnızca seçerlerse videoyu oynatmaları için bir yol sağlamalıyız. (Bazıları, videoları tamamen durdurmaktan kaçınmamız gerektiğini tartışabilir, ancak bu savaşı her zaman kazanamayız!) Benzer şekilde, bir video, kullanıcılar için belirli bir tercih olmaksızın otomatik oynatılacak şekilde ayarlanmışsa, onlara aynı zamanda videoyu duraklatın.

Bu demo, kullanıcının belirtilen bir hareket tercihi olmadığında otomatik oynatma özelliğini nasıl ayarlayabileceğimizi, tercihlerinden bağımsız olarak oynatmayı değiştirmelerine izin vermek için özel bir oynat/duraklat düğmesi uygulayarak nasıl ayarlayabileceğimizi gösterir:

(Daha sonra bu gönderiye Scott O'Hara tarafından, bu kesin kullanım durumunu detaylandırdım.)

<picture> Öğesini Kullanma

Chris Coyier, kullanıcının hareket tercihlerine bağlı olarak farklı medya kaynaklarını yüklemek için birkaç tekniği birleştiren ilginç bir makale yazdı. Bu oldukça havalı, çünkü azaltılmış hareketi tercih eden kullanıcılar için çok daha büyük GIF dosyası indirilmeyecek bile. Görebildiğim kadarıyla dezavantajı, dosya indirildikten sonra kullanıcının hareketsiz alternatife geri dönmesinin bir yolu olmaması.

Bu seçeneği ekleyen demonun değiştirilmiş bir sürümünü oluşturuyorum. (Çalıştığını görmek için sistem tercihlerinizde reduced-motion açın.) Ne yazık ki, Chrome'da animasyonlu ve hareketsiz seçenekler arasında geçiş yaparken, GIF dosyası her seferinde yeniden indiriliyor gibi görünüyor, bu durum böyle değil diğer tarayıcılar:

Yine de, bu teknik, kullanıcılar için bir hayal kırıklığı kaynağı olabilen GIF'leri göstermenin daha saygılı bir yolu gibi görünüyor.

Tarayıcı Desteği ve Son Düşünceler

prefers-reduced-motion , birkaç yıl öncesine kadar tüm modern tarayıcılarda mükemmel bir desteğe sahiptir. Gördüğümüz gibi, önce hareketi azaltan bir yaklaşım benimseyerek, desteklemeyen tarayıcılar sadece reduced-motion bir geri dönüş elde edeceklerdir. Sitelerinizi daha erişilebilir hale getirmek için bugün kullanmamak için hiçbir neden yok.

Özel geçişlerin kesinlikle bir yeri vardır ve bu ayarın veya ne işe yaradığının farkında olmayan kullanıcılar için deneyimi büyük ölçüde iyileştirebilir . Kullanıcının dezavantajı tutarsızlıktır - her geliştirici kendi çözümünü bulmak zorunda kalırsa, kullanıcının her web sitesinde farklı bir yerde bir hareket geçişi araması gerekir.

Buradaki eksik katman tarayıcılar gibi görünüyor. Tarayıcıların, kullanıcının kolayca erişebileceği bir yerde reduced-motion geçişler uyguladığını görmek isterim, böylece insanlar, göz attıkları siteden bağımsız olarak onu nerede bulacaklarını bilirler. Geliştiricileri de hareket erişilebilirliğini sağlamak için daha fazla zaman harcamaya teşvik edebilir.

alakalı kaynaklar

• Düzey 5 Medya Sorguları Spesifikasyonu, World Wide Web Konsorsiyumu (W3C)
• prefers-reduced-motion , MDN Web Dokümanları, Mozilla
• Hareket Hassasiyetleri için Azaltılmış Hareketli Tasarım, Val Head, Smashing Magazine
• Animasyonlara Hareketsiz İlk Yaklaşım, Tatiana Mac
• Azaltılmış Hareketli Görüntü Tekniği, Take 2, Chris Coyier, CSS-Tricks
• Tekrar ziyaret etmek, prefers-reduced-motion , Azaltılmış Hareketli Medya Sorgusu, Eric Bailey, CSS-Tricks
• Erişilebilirliği Geliştirmek İçin Hareketi Azaltma, Lindsey Kopacz