ডিভাইস এবং প্ল্যাটফর্ম জুড়ে পরীক্ষা ফর্ম

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

আপনার ফর্ম কীবোর্ড ব্যবহারকারীদের জন্য কাজ করে তা নিশ্চিত করুন

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

এটা চেষ্টা করে দেখুন ইনপুটে নেভিগেট করতে আপনার tab কী ব্যবহার করুন। ইনপুট সক্রিয় হলে আপনি রূপরেখা দেখতে পান? যে ফোকাস সূচক. আপনি :focus CSS pseudo-class ব্যবহার করে ফোকাস সূচক যোগ করতে পারেন।

input:focus {
  outline: 4px solid #222;
}

অ্যাক্সেসযোগ্য ফোকাস সূচক ডিজাইন করা সম্পর্কে আরও জানুন।

ব্যবহারকারীদের আপনার ফর্ম নেভিগেট সাহায্য করুন

ব্যবহারযোগ্যতা এবং অ্যাক্সেসযোগ্যতার আরেকটি ভাল পরীক্ষা হল লজিক্যাল ট্যাব অর্ডারটি ভিজ্যুয়াল ট্যাব অর্ডার অনুসরণ করে তা নিশ্চিত করা। আপনি কিভাবে ট্যাব অর্ডার পরীক্ষা করতে পারেন? সম্পূর্ণরূপে আপনার ফর্ম মাধ্যমে ট্যাব. আপনি কি কোন অযৌক্তিক নেভিগেশন জাম্প লক্ষ্য করেন? DOM অর্ডারটি ভিজ্যুয়াল অর্ডারের সাথে মেলে তা নিশ্চিত করুন।

DOM অর্ডার অনুসরণ করে পৃষ্ঠায় ভিজ্যুয়াল অর্ডার কীভাবে নিশ্চিত করা যায় সে সম্পর্কে আরও জানুন।

ব্যবহারকারীদের স্পর্শ ডিভাইসে আপনার ফর্ম পূরণ করতে সাহায্য করুন

দারুণ! আপনি নিশ্চিত করেছেন যে আপনার ফর্ম কীবোর্ডের সাথে কাজ করে। এখন, আসুন দেখি কিভাবে আপনি নিশ্চিত করতে পারেন যে এটি মোবাইল ফোনের মতো স্পর্শ ডিভাইসেও কাজ করে।

আপনার টাচ ডিভাইসে আপনার ফর্ম খুলুন, সমস্ত ক্ষেত্র পূরণ করুন এবং ফর্ম জমা দিন। একটি ফর্ম নিয়ন্ত্রণ নির্বাচন করতে আপনাকে কি একাধিকবার আলতো চাপতে হবে? সমস্যাটি হতে পারে যে ট্যাপ এলাকাগুলি খুব ছোট। নিশ্চিত করুন যে একটি বোতামের ট্যাপ টার্গেট সাইজ কমপক্ষে 48px, এবং প্রতিটি <input> এবং <select> ট্যাপ করার জন্য যথেষ্ট বড়। আপনি ফর্ম নিয়ন্ত্রণগুলির মধ্যে পর্যাপ্ত ব্যবধান যোগ করে ব্যবহারকারীদের স্পর্শ ডিভাইসে আপনার ফর্ম নেভিগেট করতে সহায়তা করতে পারেন৷

ব্যবহারকারীরা একটি অপ্টিমাইজড কীবোর্ড পান তা নিশ্চিত করুন

পূর্ববর্তী মডিউলগুলিতে, আপনি শিখেছেন কিভাবে type বা inputmode বৈশিষ্ট্য ব্যবহার করে একটি ভিন্ন অন-স্ক্রীন কীবোর্ড সক্রিয় করতে হয়।

আপনার ফোনে ডেমো খুলুন এবং টেলিফোন নম্বর ক্ষেত্রে আলতো চাপুন। লক্ষ্য করুন যে ফোন নম্বরের জন্য আপনার প্রয়োজন হতে পারে এমন অন্যান্য অক্ষরের সাথে অন-স্ক্রীন কীবোর্ডে ডিফল্টরূপে সংখ্যাগুলি দেখানো হয়৷ টেলিফোন নম্বর প্রবেশের জন্য অপ্টিমাইজ করা একটি অন-স্ক্রীন কীবোর্ড পেতে type="tel" ব্যবহার করুন।