অ্যানিমেশন এবং গতি

আপনি কি কখনো গাড়ি, নৌকা বা বিমানে চড়ার সময় হঠাৎ করে অনুভব করেছেন যে পৃথিবীটা ঘুরছে? অথবা আপনার কি কখনো এমন তীব্র মাইগ্রেন হয়েছে যে, আপনাকে "আনন্দ" দেওয়ার জন্য তৈরি করা আপনার ফোন বা ট্যাবলেটের অ্যানিমেশনগুলো দেখেই হঠাৎ আপনার বমি বমি ভাব হয়েছে? কিংবা হয়তো আপনি বরাবরই সব ধরনের গতিতে সংবেদনশীল? এগুলো হলো বিভিন্ন ধরনের ভেস্টিবুলার ডিসঅর্ডারের উদাহরণ।

৪০ বছর বয়সের মধ্যে ৩৫ শতাংশেরও বেশি প্রাপ্তবয়স্ক কোনো না কোনো ধরনের ভেস্টিবুলার বৈকল্যে ভুগে থাকেন। এর ফলে সাময়িক মাথা ঘোরা, মাইগ্রেনজনিত ভার্টিগো, অথবা আরও স্থায়ী ভেস্টিবুলার অক্ষমতা দেখা দিতে পারে।

মাথা ঘোরার কারণ হওয়ার পাশাপাশি, চলমান, পলক ফেলা বা স্ক্রল করা বিষয়বস্তু অনেকের মনোযোগে ব্যাঘাত ঘটায়। এডিএইচডি এবং মনোযোগের ঘাটতিজনিত অন্যান্য সমস্যায় আক্রান্ত ব্যক্তিরা আপনার অ্যানিমেটেড উপাদানগুলোর কারণে এতটাই বিভ্রান্ত হতে পারেন যে, তারা প্রথমত আপনার ওয়েবসাইট বা অ্যাপে কেন এসেছিলেন, সেটাই ভুলে যান।

এই মডিউলে, আমরা সব ধরনের গতিজনিত ব্যাধিতে আক্রান্ত ব্যক্তিদের আরও ভালোভাবে সহায়তা করার কিছু উপায় নিয়ে আলোচনা করব।

ঝলকানি এবং চলমান বিষয়বস্তু

অ্যানিমেশন এবং মোশন তৈরি করার সময়, নিজেকে জিজ্ঞাসা করুন যে উপাদানটির নড়াচড়া অতিরিক্ত কিনা। উদাহরণস্বরূপ, গাঢ় থেকে হালকা রঙের দ্রুত পরিবর্তন বা স্ক্রিনে দ্রুত নড়াচড়া, ফটোসেনসিটিভ এপিলেপসি আক্রান্ত ব্যক্তিদের মধ্যে খিঁচুনির কারণ হতে পারে। অনুমান করা হয় যে এপিলেপসিতে আক্রান্ত ব্যক্তিদের মধ্যে ৩% ফটোসেনসিটিভিটিতে ভোগেন এবং এটি নারী ও তরুণদের মধ্যে বেশি দেখা যায়।

ফ্ল্যাশিং বিষয়ে WCAG-এর নির্দেশিকা নিম্নলিখিত বিষয়গুলোর বিরুদ্ধে সুপারিশ করে:

• যেকোনো এক সেকেন্ডে তিনবারের বেশি ঝলকানি দেয়
• সাধারণ ফ্ল্যাশ এবং লাল ফ্ল্যাশের সীমা অতিক্রম না করা ফ্ল্যাশ।

এই ঝলকানিগুলো বড়জোর ওয়েব পেজ ব্যবহারে অক্ষমতা সৃষ্টি করতে পারে, অথবা সবচেয়ে খারাপ ক্ষেত্রে অসুস্থতার কারণ হতে পারে।

যেকোনো অতিরিক্ত নড়াচড়ার ক্ষেত্রে, ফটোসেনসিটিভ এপিলেপসি অ্যানালাইসিস টুল (PEAT) ব্যবহার করে তা পরীক্ষা করা অপরিহার্য। PEAT একটি বিনামূল্যের টুল, যা শনাক্ত করে যে স্ক্রিনের কন্টেন্ট, ভিডিও বা অ্যানিমেশন খিঁচুনির কারণ হতে পারে কিনা। সব কন্টেন্ট PEAT দ্বারা মূল্যায়ন করার প্রয়োজন নেই, তবে যেসব কন্টেন্টে আলোর ঝলকানি বা হালকা ও গাঢ় পটভূমির রঙের মধ্যে দ্রুত পরিবর্তন থাকে, সেগুলো সতর্কতার জন্য মূল্যায়ন করা উচিত।

অ্যানিমেশন এবং মোশন সম্পর্কে আপনার নিজেকে আরও একটি প্রশ্ন করা উচিত, তা হলো স্ক্রিনের বিষয়বস্তু বা কার্যকলাপ বোঝার জন্য উপাদানটির নড়াচড়া অপরিহার্য কি না। যদি তা অপরিহার্য না হয়, তবে আপনি যে উপাদানটি তৈরি বা ডিজাইন করছেন, তা থেকে সমস্ত নড়াচড়া—এমনকি অতি সামান্য নড়াচড়াও—বাদ দেওয়ার কথা বিবেচনা করুন।

ধরুন, আপনি মনে করেন যে এলিমেন্টটির নড়াচড়া অপরিহার্য নয়, কিন্তু এটি ব্যবহারকারীর সামগ্রিক অভিজ্ঞতাকে উন্নত করতে পারে, অথবা অন্য কোনো কারণে আপনি এর নড়াচড়াটি সরাতে পারছেন না। সেক্ষেত্রে, আপনার মোশন (motion) সংক্রান্ত WCAG-এর নির্দেশিকা অনুসরণ করা উচিত। নির্দেশিকা অনুযায়ী, ব্যবহারকারীদের জন্য এমন একটি অপশন তৈরি করতে হবে যার মাধ্যমে তারা নিম্নলিখিত এলিমেন্টগুলোর নড়াচড়া থামাতে, বন্ধ করতে বা লুকাতে পারবে: অনাবশ্যক চলমান, পলক ফেলা বা স্ক্রল করা এলিমেন্ট, যেগুলো স্বয়ংক্রিয়ভাবে শুরু হয়, পাঁচ সেকেন্ডের বেশি সময় ধরে চলে এবং পেজের অন্যান্য এলিমেন্টের অংশ।

গতি থামান, বন্ধ করুন বা লুকান

আপনার পেজে একটি পজ, স্টপ বা হাইড ব্যবস্থা যোগ করুন, যা ব্যবহারকারীদের সম্ভাব্য সমস্যাযুক্ত মোশন অ্যানিমেশন বন্ধ করার সুযোগ দেবে। আপনি এটি স্ক্রিন লেভেলে অথবা এলিমেন্ট লেভেলে করতে পারেন।

উদাহরণস্বরূপ, ধরুন আপনার ডিজিটাল প্রোডাক্টে অনেক অ্যানিমেশন রয়েছে। ব্যবহারকারীদের অভিজ্ঞতা নিয়ন্ত্রণের সুযোগ দিতে একটি অ্যাক্সেসিবল জাভাস্ক্রিপ্ট টগল যোগ করার কথা ভাবতে পারেন। যখন বাটনটি 'মোশন অফ'-এ টগল করা হবে, তখন সেই স্ক্রিনসহ অন্য সব স্ক্রিনের সমস্ত অ্যানিমেশন থেমে যাবে।

মিডিয়া কোয়েরি ব্যবহার করুন

আপনার অ্যানিমেশনগুলো বাছাই করার পাশাপাশি, ব্যবহারকারীদেরকে মুভমেন্ট থামানো, বন্ধ করা বা লুকানোর সুযোগ দেওয়া এবং অনন্ত অ্যানিমেশন লুপ এড়ানোর সাথে সাথে, আপনি একটি মুভমেন্ট-কেন্দ্রিক মিডিয়া কোয়েরি যোগ করার কথাও বিবেচনা করতে পারেন। এর ফলে স্ক্রিনে কী প্রদর্শিত হবে, সে বিষয়ে আপনার ব্যবহারকারীরা আরও বেশি বিকল্প পান।

@prefers-reduced-motion

কালার মডিউলের কালার-কেন্দ্রিক মিডিয়া কোয়েরিগুলোর মতোই, @prefers-reduced-motion মিডিয়া কোয়েরিটি ব্যবহারকারীর অ্যানিমেশন-সম্পর্কিত ওএস সেটিংস যাচাই করে।

একজন ব্যবহারকারী গতি কমাতে ডিসপ্লে প্রেফারেন্স সেট করতে পারেন। এই সেটিংসগুলো বিভিন্ন অপারেটিং সিস্টেমে ভিন্ন হয় এবং এগুলোকে ইতিবাচক বা নেতিবাচকভাবে দেখা হতে পারে। @prefers-reduced-motion এর মাধ্যমে, আপনি এমন একটি সাইট ডিজাইন করতে পারেন যা এই পছন্দগুলোকে সম্মান করে।

ম্যাকওএস এবং অ্যান্ড্রয়েডে, ব্যবহারকারী গতি কমাতে এই সেটিংটি চালু করেন। ম্যাকওএস-এ, একজন ব্যবহারকারী সেটিংস > অ্যাক্সেসিবিলিটি > ডিসপ্লে-তে ‘রিডিউস মোশন’ সেট করতে পারেন। অ্যান্ড্রয়েডের সেটিংটি হলো ‘রিমুভ অ্যানিমেশনস ’। উইন্ডোজে, সেটিংটি ‘শো অ্যানিমেশনস’ হিসেবে স্পষ্টভাবে উল্লেখ করা থাকে, যা ডিফল্টরূপে চালু থাকে। গতি কমাতে একজন ব্যবহারকারীকে অবশ্যই এই সেটিংটি বন্ধ করতে হবে।

যেসব ব্যক্তির গতি বুঝতে অসুবিধা হয়, তাদের জন্য প্রবেশগম্যতা নিশ্চিত করতে, WCAG 2.0 AA নির্দেশিকায় বর্ণিত ৫-সেকেন্ডের সীমার চেয়ে ছোট অ্যানিমেশনগুলোও সতর্কতার সাথে ব্যবহার করা উচিত। এর সবচেয়ে নির্ভরযোগ্য পদ্ধতি হলো, যেসব ব্যবহারকারী কম গতির প্রতি তাদের পছন্দ প্রকাশ করেছেন, তাদেরকে অ্যানিমেশনের উপর বিশেষ নিয়ন্ত্রণ প্রদান করা, যাতে তারা যথাক্রমে প্লে বাটন এবং পজ বাটনের মতো নির্দিষ্ট কন্ট্রোল ব্যবহার করে অ্যানিমেশনটি শুরু ও বন্ধ করতে পারেন।

চলাচলের জন্য প্রগতিশীল উন্নতি

ডিজাইনার এবং ডেভেলপার হিসেবে আমাদের অনেক সিদ্ধান্ত নিতে হয়, যার মধ্যে রয়েছে ডিফল্ট মুভমেন্ট স্টেট এবং কী পরিমাণ মুভমেন্ট দেখানো হবে। মোশনের শেষ উদাহরণটি আরেকবার দেখুন।

ধরা যাক, আমরা সিদ্ধান্ত নিলাম যে স্ক্রিনের বিষয়বস্তু বোঝার জন্য অ্যানিমেশনটি অপ্রয়োজনীয়। সেক্ষেত্রে, আমরা সম্পূর্ণ গতির সংস্করণের পরিবর্তে ডিফল্ট অবস্থা হিসেবে সংক্ষিপ্ত গতির অ্যানিমেশনটি সেট করতে পারি। ব্যবহারকারীরা বিশেষভাবে অ্যানিমেশনের জন্য অনুরোধ না করলে, অ্যানিমেশনগুলো বন্ধ থাকে।

খিঁচুনি, ভেস্টিবুলার এবং অন্যান্য দৃষ্টিজনিত সমস্যায় আক্রান্ত ব্যক্তিদের জন্য কোন মাত্রার নড়াচড়া সমস্যা সৃষ্টি করবে তা আমরা আগে থেকে অনুমান করতে পারি না। স্ক্রিনে সামান্য নড়াচড়াও মাথা ঘোরা, ঝাপসা দৃষ্টি বা আরও গুরুতর কিছু ঘটাতে পারে। তাই, নিম্নলিখিত উদাহরণে, আমরা ডিফল্টভাবে কোনো অ্যানিমেশন রাখিনি।

স্তরযুক্ত মিডিয়া কোয়েরি

আপনার ব্যবহারকারীদের আরও বেশি বিকল্প দিতে আপনি একাধিক মিডিয়া কোয়েরি ব্যবহার করতে পারেন। চলুন @prefers-color-scheme , @prefers-contrast এবং @prefers-reduced-motion সবগুলো একসাথে ব্যবহার করি।

আপনার ব্যবহারকারীদের বেছে নেওয়ার অনুমতি দিন

ব্যবহারকারীদের আনন্দ দেওয়ার জন্য আমাদের ডিজিটাল পণ্যগুলিতে অ্যানিমেশন যুক্ত করা মজাদার হলেও, এটা মনে রাখা অত্যন্ত জরুরি যে এই ডিজাইনগুলির দ্বারা কিছু মানুষ প্রভাবিত হবেন। গতি সংবেদনশীলতা যে কাউকেই প্রভাবিত করতে পারে; এর ফলে সামান্য অস্বস্তি থেকে শুরু করে মারাত্মক অসুস্থতা বা খিঁচুনি পর্যন্ত হতে পারে।

কতটা নড়াচড়া বাড়াবাড়ি হবে তা অনুমান করার পরিবর্তে, ব্যবহারকারীকে তার জন্য কোনটি সেরা তা সিদ্ধান্ত নেওয়ার সুযোগ দিতে আপনি বিভিন্ন টুল ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনার সাইট বা ওয়েব অ্যাপের মধ্যে অ্যানিমেশন চালু বা বন্ধ করার জন্য একটি টগল যোগ করুন। এই ধরনের টগলকে ডিফল্টভাবে বন্ধ রাখার কথা বিবেচনা করতে পারেন।