গ্রাহক টাস্কের চারপাশে কভারেজ গঠন করুন
ভ্যালু তৈরি করে এমন রুট এবং আউটকামগুলো তালিকাভুক্ত করুন: সার্ভিস খোঁজা, সার্চ, আইটেম যোগ, বুকিং, সাইন ইন, সাহায্য চাওয়া, বা পেমেন্ট। প্রত্যেকটির জন্য সেই কম্পোনেন্টগুলো নাম দিন যা আকৃতি বদলাতে বা ব্যর্থ হতে পারে: ন্যাভিগেশন, ফিল্টার, কার্ড, টেবিল, ইমেজ, ব্যানার, ফর্ম, ড্রয়ার এবং এমবেডেড উইজেট। কেবল বর্তমান ফোন মডেলের তালিকা নয়—আপনার কন্টেন্ট যেখানে সংকুচিত হয় সেই প্রস্থগুলো টেস্ট করুন। প্রতিটি ব্রেকপয়েন্টের ঠিক নিচে, উপর এবং ঠিক সেখানে টেস্ট করুন।
সংকীর্ণ এবং মধ্য-প্রস্থ ফোন, একটি ট্যাবলেটসদৃশ প্রস্থ, ল্যাপটপ, বিস্তৃত ডেস্কটপ, এবং তখনি ল্যান্ডস্কেপ অন্তর্ভুক্ত করুন যখন এটি টাস্ক পরিবর্তন করে।
লম্বা শিরোনাম, খালি রেজাল্ট, ভ্যালিডেশন এরর, মূল্য ব্যাজ, সম্পূর্ণ ঠিকানা, এবং দীর্ঘ লেবেল মতো বাস্তব অবস্থা থাকলে সেগুলো ব্যবহার করুন।
রিফ্লো, পাঠযোগ্যতা এবং জুম প্রমাণ করুন
পেজে উপযুক্ত viewport সেটিং আছে কি না নিশ্চিত করুন, তারপর পেজ-স্তরের অনুভূমিক স্ক্রলিং খুঁজুন। ফিক্সড ইমেজ, বিস্তৃত ফিল্ড, নেগেটিভ মার্জিন, অফ-ক্যানভাস প্যানেল এবং ব্যানার সাধারণ কারণ। W3C-এর WCAG 2.1 Reflow ক্রাইটেরিয়ান 320 CSS পিক্সেল সমতুল্য প্রস্থে ভার্টিকাল স্ক্রলিং বর্ণনা করে, যার মধ্যে 400% জুমে 1280-পিক্সেল ভিউপোর্ট অন্তর্ভুক্ত। যদি সেই ক্রাইটেরিয়ন লক্ষ্য থাকে, তাহলে বাস্তব জুম পরিস্থিতি পরীক্ষা করুন। একটি ম্যাপ, ভিডিও বা ডেটা টেবিলকে দুই-মাত্রিক লেআউট প্রয়োজন হতে পারে, কিন্তু সেটি কম্পোনেন্টের মধ্যে সীমাবদ্ধ রাখুন এবং আশপাশের পেজকে রিফ্লো করতে দিন।
প্রতিটি পরীক্ষিত বাউন্ডারিতে হেডার, মেইন কন্টেন্ট, ফুটার, স্টিকি বার, ডায়ালগ এবং এরর সামারি পরীক্ষা করুন।
সংকীর্ণ স্ক্রিনের জন্য তথ্য পুনঃসংগঠিত করুন; কোনো প্রয়োজনীয়তা, মূল্যবিবরণ বা হেল্প পাথ নিঃশব্দে মুছবেন না।
কন্টেন্ট ও ফর্মকে স্ট্রেস করুন
কন্টেন্ট অপারেশনগুলো CSS রিলিজ ছাড়াও রেসপনসিভ ব্যর্থতা ঘটাতে পারে। দীর্ঘ অনুমোদিত হেডিং, কয়েকটি ব্যাজ, অনুপস্থিত ইমেজ, নির্বাচিত ফিল্টার, বড় লিগ্যাল নোটিস, এবং ব্রাউজার-ভরা ফিল্ড পরীক্ষা করুন। যখন কলাম স্ট্যাক করে, তখন পড়ার এবং কিবোর্ড অর্ডারটিও অর্থবহ আছে কিনা নিশ্চিত করুন। একটি ছোট ডিভাইসে বাস্তব ফর্ম পূরণ করুন: কন্ট্রোলগুলো খুলুন, একটি এরর ঠিক করুন, এবং সাবমিট করুন। থার্ড-পার্টি উইজেটগুলো প্রোডাকশন-সদৃশ পেজে পরীক্ষা করুন কারণ তাদের কন্টেইনার, কনসেন্ট স্টেট, ফন্ট এবং স্টাইল ফলাফল বদলে দিতে পারে।
সম্ভাব্য সর্বোচ্চ দৈর্ঘ্য এবং কম্বিনেশনগুলো প্রতিফলিত করুন, কিন্তু QA প্রমাণে কাস্টমার বা পেমেন্ট ডেটা অন্তর্ভুক্ত করবেন না।
নোটিশ, চ্যাট, প্রচার, এবং ভ্যালিডেশন ম্যাসেজ একসাথে খুলুন; কোনোটি প্রাইমারি অ্যাকশন বা ফোকাস করা ফিল্ড ঢেকে রাখা উচিত নয়।
প্রতিটি ইনপুট পথ অনুশীলন করুন
বড় স্ক্রিন মানেই মাউস থাকবে এমন নয়, এবং ছোট স্ক্রিন মানেই শুধুমাত্র টাচ থাকবে এমন নয়। hover মিডিয়া ফিচার পরীক্ষা করে যে প্রধান ইনপুট সুবিধাজনকভাবে hover করতে পারে কিনা, তাই hover থাকা উচিত সুবিধা বাড়াতে, একমাত্র রুট হিসেবে নয়। ডেস্কটপে কিবোর্ড ও পয়েন্টার ব্যবহার, টাচ ডিভাইসে ট্যাপ ও স্ক্রল, এবং যেখানে প্রাসঙ্গিক সেখানে মিক্সড-ইনপুট ডিভাইস পরীক্ষা করুন। কমপ্যাক্ট ক্লোজ বাটন, স্টেপার, চিপ, ক্যালেন্ডার এবং আইকন অ্যাকশন খতিয়ে দেখুন। WCAG 2.2 Target Size (Minimum) 24 বাই 24 CSS-পিক্সেল লক্ষ্যমাত্রা সাইজ নির্দিষ্ট করে নির্দিষ্ট ব্যতিক্রমসহ, যার মধ্যে স্পেসিং এবং ইনলাইন লিঙ্ক রয়েছে। এটা একটি ক্রাইটেরিয়া যার স্কোপ এবং ব্যতিক্রম আছে—এটি প্রতিশ্রুতি দেয় না যে প্রতিটি 24-পিক্সেল কন্ট্রোল প্রত্যেকের জন্য সমানভাবে সহজ।
পেজ জুড়ে ট্যাব করুন। ফোকাস দৃশ্যমান থাকা উচিত, একটি যুক্তিসঙ্গত অর্ডার অনুসরণ করা উচিত, এবং মেনু ও ডায়ালগে প্রবেশ-প্রস্থান পূর্বানুমানযোগ্য হতে হবে।
একটি প্রয়োজনীয় hover রিভিলকে ফোকাস, ট্যাপ, বা দৃশ্যমান কন্ট্রোল দ্বারা পাওয়া না গেলে বিভ্রান্তিকর প্রথম-ট্যাপ আচরণ প্রতিরোধ করুন।
সংশপ্তি এবং কনস্ট্রেইন্টে অ্যাসেট ও পারফরম্যান্স যাচাই করুন
একটি ইমেজ কনটেইনারে ফিট করলেও ডিভাইসের জন্য ভুল ফাইল হতে পারে। পরীক্ষা করুন যে মিডিয়া কনটেইনের মধ্যে থাকে, প্রযোজ্য হলে লেআউট স্পেস রিজার্ভ করে, উপযোগী ক্রপ সংরক্ষণ করে, এবং উপযুক্ত ক্যান্ডিডেট অনুরোধ করে। srcset এবং sizes ব্রাউজারকে সরবরাহকৃত ইমেজ সোর্সের মধ্যে থেকে নির্বাচন করতে তথ্য দেয়; এগুলো কোনো নির্দিষ্ট অনুরোধ নিশ্চয় করে না। DevTools থ্রোটলিং সমস্যাগুলো আগে বের করতে সাহায্য করে, কিন্তু এর CPU ও নেটওয়ার্ক কন্ট্রোল ডেভেলপমেন্ট কম্পিউটারের সাপেক্ষে শর্ত সিমুলেট করে। প্রধান যাত্রাগুলো বাস্তব ডিভাইস ও সংযোগে পুনরায় পরীক্ষা করুন। ফন্ট, হিরো মিডিয়া, ক্যারোসেল, ক্লায়েন্ট-সাইড কাজ এবং থার্ড-পার্টি স্ক্রিপ্টগুলো চেক করুন বিলম্ব, শিফট, বা ব্লকড ট্যাপের জন্য।
রুট, viewport, বাস্তব বা সিমুলেটেড কনেকশন, এবং কী ধীর বা অনস্থিতি হয়েছে তা ক্যাপচার করুন; সমান শর্তগুলো তুলনা করুন।
নিরাপদ ক্ষেত্রে, টেস্ট বিল্ডে নন-এসেনশিয়াল এমবেডস দেরি করুন যাতে জানতে পারেন কোর টাস্ক ব্যবহারযোগ্য আছে কি না।
প্রোএকটিভ আপটাইম কাজে রিমিডিয়েট করুন
Status Is UP হওয়ার জন্য রেসপনসিভ রেডিনেস প্রোএকটিভ আপটাইম অপ্টিমাইজেশন: একটি ইউজার-ব্লকিং ডিভাইস পথ শনাক্ত করুন, কারণটি সঠিক করুন, মেরামত প্রমাণ করুন, এবং পুনরাবৃত্তি প্রতিরোধ করুন। এটি কোনো মনিটরিং অ্যালার্ট যে প্রতিটি লেআউট বা ইন্টারঅ্যাকশন ত্রুটিকে বিচার করতে পারে—এমন দাবী নয়। টাস্ক ইমপ্যাক্ট এবং রিচ অনুসারে অগ্রাধিকার দিন। ডিপ্লয়মেন্টের আগে সংশ্লিষ্ট প্রস্থ এবং পরিবর্তিত যাত্রাটি বাস্তব হার্ডওয়্যারে পরীক্ষা করুন। শেয়ারড ন্যাভিগেশন, স্টাইল, স্ক্রিপ্ট, পেমেন্ট বা ইন্টিগ্রেশনের পরিবর্তনের জন্য একটি রোলব্যাক পরিকল্পনা রাখুন। রিলিজের পরে, প্রমাণের ধাপগুলো পুনরায় করুন এবং পরিবর্তন রেকর্ডে প্রমাণ সংযুক্ত করুন।
রুট, ডিভাইস বা viewport, অরিয়েন্টেশন, ইনপুট, স্টেট, প্রত্যাশিত ফলাফল, প্রকৃত ফলাফল, এবং একটি রেড্যাক্টেড ক্যাপচার উল্লেখ করুন।
রুট-চিত্রকরণ ওভাররাইডের বদলে একটি কম্পোনেন্ট, লেআউট রুল, টোকেন, বা ইমেজ-ডেলিভারি ফিক্স প্রাধান্য দিন; ব্যতিক্রমগুলোর জন্য একটি মালিক ও অপসারণ পরিকল্পনা দিন।