इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।
पढ़ना एक पेशीय क्रिया है। आँख पंक्ति पर सहजता से नहीं फिसलती; वह सैकेड (saccade) में कूदती है और फ़िक्सेशन (fixation) में उतरती है, और समझ उन्हीं पड़ावों में बनती है। पेज पर जो कुछ भी हिलता है, वह उन पड़ावों के लिए होड़ करता है। गति दृश्य-तंत्र का सबसे प्रबल ध्यान-संकेत है — एक विकासात्मक चेतावनी-घंटी जिसे इच्छाशक्ति से बंद नहीं किया जा सकता — यही कारण है कि टेक्स्ट के पास के एनिमेटेड तत्व पठन के लिए इतने संक्षारक हैं, और स्वयं हिलता टेक्स्ट तो बमुश्किल पठनीय है।
आधुनिक वेब गति से लबालब है: प्रवेश-एनिमेशन, पैरेलैक्स दृश्यावली, स्क्रॉल से खुलते खुलासे, अपने आप आगे बढ़ते कैरोसेल। इसमें कुछ शिल्प है। बहुत कुछ पाठक की क़ीमत पर सजावट है। और पाठकों के एक समूह के लिए यह भटकाव से भी बदतर है।
वेस्टिबुलर विकार: गति हानि के रूप में
वेस्टिबुलर विकारों — भीतरी कान और संतुलन-तंत्र की स्थितियों — वाले लोगों के लिए ऑन-स्क्रीन गति चक्कर, मितली, भ्रमि (वर्टिगो) और ऐसे सिरदर्द पैदा कर सकती है जो नज़र हटाने के बहुत बाद तक बने रहते हैं। ट्रिगर विशिष्ट हैं और प्रभावित उपयोगकर्ताओं द्वारा भली-भाँति वर्णित: व्यूपोर्ट के आर-पार सरकते बड़े तत्व, ज़ूम और स्केलिंग प्रभाव, अलग-अलग गति से चलती पैरेलैक्स परतें, और स्क्रॉल-बद्ध एनिमेशन जो आँख के देखे को हाथ के किए से अलग कर देता है। यह झुंझलाहट नहीं है; यह शारीरिक प्रतिक्रिया है, अरुचि से अधिक मोशन सिकनेस के निकट। एक पेज पाठक को बीमार कर सकता है।
WCAG इसे 2.3.3 (Animation from Interactions) में संबोधित करता है: अंतःक्रिया से शुरू होने वाला गति-एनिमेशन अक्षम किया जा सकना चाहिए, जब तक एनिमेशन अनिवार्य न हो। यह AAA मानदंड है, जो इसके महत्व को कमतर आँकता है — प्रभावित आबादी के लिए यह कोई परिष्कार नहीं बल्कि उपयोगी और अनुपयोगी के बीच का अंतर है।
पाठक का स्विच: prefers-reduced-motion
हर प्रमुख ऑपरेटिंग सिस्टम अब "गति कम करें" सेटिंग देता है, और prefers-reduced-motion मीडिया क्वेरी उसे स्टाइलशीटों और स्क्रिप्टों तक पहुँचाती है। इसका सम्मान ज़िम्मेदार व्यवहार की कठोर अपेक्षा है, प्रोग्रेसिव एन्हांसमेंट नहीं — कारण सरल है: जिन लोगों ने यह सेटिंग चुनी, उन्होंने इसलिए चुनी क्योंकि गति उन्हें हानि पहुँचाती है। सेटिंग की अनदेखी एक घोषित चिकित्सकीय अनुकूलन की अनदेखी है।
इसका अच्छा सम्मान एनिमेशन बंद कर देने से अधिक है:
- गति की जगह अपारदर्शिता रखें। फ़ेड "यह प्रकट हुआ" कह देता है, स्क्रीन पर कुछ भी खिसकाए बिना; क्रॉस-फ़ेड वहाँ भी व्यापक रूप से सहे जाते हैं जहाँ स्लाइड और ज़ूम नहीं।
- कम-गति मोड में पैरेलैक्स और स्क्रॉल-बद्ध प्रभाव पूरी तरह अक्षम करें — पैरेलैक्स का कोई "घटा हुआ" संस्करण रखने लायक़ नहीं है।
- वरीयता को JavaScript-चालित एनिमेशन में भी लागू करें, केवल CSS में नहीं; मीडिया क्वेरी स्क्रिप्ट से पूछी जा सकती है, और एनिमेशन लाइब्रेरियों को उस पर गेट किया जा सकता है।
- "कम करें" का अर्थ "हर अवस्था-परिवर्तन हटा दें" न समझें। तात्कालिक बदलाव भी भ्रमित कर सकते हैं; लक्ष्य निरर्थक स्थानिक गति मिटाना है, फ़ीडबैक नहीं।
हिलता टेक्स्ट अपठनीय टेक्स्ट है
जो टेक्स्ट स्क्रॉल करता, टिकता, सरकता या झपकता है, वह सैकेड-और-फ़िक्सेशन तंत्र को सीधे हरा देता है। कम दृष्टि वाले पाठक, आवर्धन उपयोग करने वाले पाठक (जिनके लिए हिलता लक्ष्य शब्द के बीच में ही आवर्धित क्षेत्र से बाहर निकल सकता है), डिस्लेक्सिया या ध्यान-कठिनाइयों वाले पाठक, और बस धीरे पढ़ने वाले पाठक — सब अनुपातहीन रूप से दंडित होते हैं: टेक्स्ट उनके पूरा करने से पहले चला जाता है।
WCAG 2.2.2 (Pause, Stop, Hide) — Level A मानदंड, सबसे निचला और सबसे कम समझौता-योग्य स्तर — अपेक्षा करता है कि अपने आप शुरू होकर पाँच सेकंड से अधिक चलने वाली किसी भी हिलती, झपकती या स्क्रॉल करती सामग्री के लिए उसे रोकने, थामने या छिपाने की व्यवस्था हो। अब तक का सबसे आम अपराधी अपने आप आगे बढ़ता कैरोसेल है, विशेषकर टेक्स्ट ढोने वाला। टाइमर पर घूमता कैरोसेल यह पक्का कर देता है कि कुछ पाठक कोई स्लाइड कभी पूरी नहीं कर पाएँगे; "पॉज़" नियंत्रण, अगर हो भी, तो प्रायः नन्हा, बिना लेबल का, या उसी झुंझलाहट के बाद खोजा जा सकने वाला होता है जिसे उसे रोकना चाहिए था। अगर सामग्री मायने रखती है, तो वह स्थिरता की हक़दार है। अगर वह अपने आप घूमती है, तो डिज़ाइन पहले ही मान चुका है कि वह मायने नहीं रखती — और उसे केवल पाठक के नियंत्रण में ही आगे बढ़ना चाहिए।
स्क्रॉल से शुरू होने वाले टेक्स्ट-प्रभाव विशेष संदेह के पात्र हैं: व्यूपोर्ट में आते ही धीरे-धीरे उभरते अनुच्छेद, अक्षर-दर-अक्षर जुड़ती सुर्ख़ियाँ, पृष्ठभूमि स्क्रॉल होते समय जड़ा हुआ टेक्स्ट। हर एक पाठक और शब्दों के बीच एक एनिमेशन घुसा देता है। पाठक पढ़ने आया था; शब्दों को वहाँ मौजूद रहने दें।
पठन का सम्मान करने वाली गति
इनमें से कुछ भी स्थिर वेब की वकालत नहीं है। गति के पास वैध काम है: बताना कि क्रिया दर्ज हो गई, दिखाना कि हटाया गया पैनल कहाँ गया, आँख को उस बदलाव की ओर खींचना जो अन्यथा छूट जाता। उस सेवा में गति संक्षिप्त, छोटी, विरल होती है, और बॉडी टेक्स्ट पर कभी लागू नहीं होती। परीक्षणों का एक उपयोगी सेट:
- क्या गति कुछ ऐसा बताती है जो पाठक को चाहिए, या कुछ ऐसा सजाती है जो डिज़ाइनर को भाता है?
- क्या वह उस टेक्स्ट पर या उसके पास है जिसे कोई अभी पढ़ रहा है?
- क्या वह एक बार, संक्षेप में चलती है, या लूप करती है?
- क्या वह
prefers-reduced-motionका पूर्ण सम्मान करती है?
यह अध्याय नया क्यों है
पहला संस्करण उन परिस्थितियों से पहले का है जो इस अध्याय को आवश्यक बनाती हैं। 2005 में CSS एनिमेट नहीं कर सकता था; गंभीर गति के लिए Flash चाहिए था, और उसकी सुगम्यता-चर्चा झपकने और दौरे के जोखिम पर केंद्रित थी, वेस्टिबुलर हानि पर नहीं। prefers-reduced-motion क्वेरी 2017 तक ब्राउज़रों में नहीं आई, WCAG 2.3.3 संस्करण 2.1 के साथ 2018 में आया, और आधुनिक वेब की स्क्रॉल-चालित, एनिमेशन-सराबोर शैली उससे भी युवा है। गति सस्ती हो गई; संयम का अनुशासन ही वह चीज़ है जो ये दिशानिर्देश अब जोड़ सकते हैं।
CSS में
/* Default: entrance combines movement and fade */
.reveal {
animation: slide-fade-in 300ms ease-out;
}
@keyframes slide-fade-in {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: none; }
}
/* Reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
.reveal {
animation: fade-in 200ms ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Coarse safety net for unaudited animation — a last
resort, not the practice; it also removes the fades
and feedback worth keeping */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}सिफ़ारिशें
prefers-reduced-motionका सम्मान हर जगह करें — CSS और JavaScript में — एक कठोर अपेक्षा के रूप में।- कम-गति मोड में स्लाइड और ज़ूम की जगह फ़ेड रखें; पैरेलैक्स और स्क्रॉल-बद्ध प्रभाव सिरे से हटाएँ।
- बॉडी टेक्स्ट को कभी एनिमेट न करें। पठन और गति शत्रु हैं।
- WCAG 2.2.2 पूरा करें: पाँच सेकंड से अधिक अपने आप हिलती किसी भी चीज़ को दृश्य पॉज़, स्टॉप या हाइड नियंत्रण चाहिए।
- अर्थपूर्ण सामग्री के लिए अपने आप आगे बढ़ते कैरोसेल से बचें; अगर कोई हो, तो उसे पाठक चलाए।
- सोद्देश्य गति को संक्षिप्त, छोटा और बिना-लूप रखें, और उसे पढ़े जा रहे टेक्स्ट से दूर रखें।
- मुख्य पृष्ठों का परीक्षण OS की गति-घटाने वाली सेटिंग चालू करके करें; बची हुई किसी भी स्थानिक एनिमेशन को बग मानें।