আপনি যে ফর্মটি তৈরি করেন তা মানুষের জন্য। মানুষ বিভিন্ন ডিভাইস ব্যবহার করে। কেউ মাউস ব্যবহার করে, কেউ স্পর্শ ডিভাইস, কেউ কীবোর্ড, কেউ চোখের নড়াচড়া দ্বারা নিয়ন্ত্রিত ডিভাইস। কেউ একটি স্ক্রিন রিডার ব্যবহার করে, কেউ একটি ছোট স্ক্রীন, কেউ কেউ টেক্সট বড় করার সফ্টওয়্যার ব্যবহার করে। সবাই আপনার ফর্ম ব্যবহার করতে চায়. কীভাবে আপনার ফর্মটি সবার জন্য অ্যাক্সেসযোগ্য এবং ব্যবহারযোগ্য করা যায় তা জানুন।
ব্যবহারকারীরা একটি ফর্ম ক্ষেত্রের উদ্দেশ্য বুঝতে পারে তা নিশ্চিত করুন৷
আপনি চয়ন করতে পারেন অনেক ফর্ম নিয়ন্ত্রণ আছে. তাদের সবার কি মিল আছে? প্রতিটি ফর্ম কন্ট্রোলের একটি সংশ্লিষ্ট <label> উপাদান থাকতে হবে। <label> উপাদানটি একটি ফর্ম নিয়ন্ত্রণের উদ্দেশ্য বর্ণনা করে। <label> পাঠ্যটি দৃশ্যত ফর্ম নিয়ন্ত্রণের সাথে যুক্ত, এবং স্ক্রিন রিডারদের দ্বারা পড়া হয়।
উপরন্তু, <label> ট্যাপ করা বা ক্লিক করা সংশ্লিষ্ট ফর্ম নিয়ন্ত্রণকে ফোকাস করে, এটিকে আরও বড় লক্ষ্য করে তোলে।
অন্তর্নির্মিত ব্রাউজার বৈশিষ্ট্যগুলি অ্যাক্সেস করতে অর্থপূর্ণ HTML ব্যবহার করুন
তাত্ত্বিকভাবে, আপনি শুধুমাত্র <div> উপাদান ব্যবহার করে একটি ফর্ম তৈরি করতে পারেন। এমনকি আপনি এটিকে একটি নেটিভ <form> এর মতো দেখাতে পারেন। অ শব্দার্থিক উপাদান ব্যবহার করে সমস্যা কি?
অন্তর্নির্মিত ফর্ম উপাদান অনেক অন্তর্নির্মিত বৈশিষ্ট্য প্রদান করে। এর একটি উদাহরণ কটাক্ষপাত আছে.
দৃশ্যত, <input> (উদাহরণে প্রথমটি) এবং <div> দেখতে একই রকম। আপনি উভয়ের জন্য পাঠ্য সন্নিবেশ করতে পারেন, কারণ <div> এর একটি contenteditable বৈশিষ্ট্য রয়েছে। যদিও উপযুক্ত <input> এলিমেন্ট ব্যবহার করা এবং <input> এর মত দেখতে <div> এর মধ্যে অনেক পার্থক্য রয়েছে।
একজন স্ক্রিন রিডার ব্যবহারকারী <div> কে একটি ইনপুট উপাদান হিসেবে চিনতে পারে না এবং ফর্মটি পূরণ করতে সক্ষম হয় না। সমস্ত স্ক্রিন রিডার ব্যবহারকারী শুনেছেন 'নাম', কোনো ইঙ্গিত ছাড়াই যে উপাদানটি পাঠ্য যোগ করার জন্য একটি ফর্ম নিয়ন্ত্রণ।
<div>Name</div> এ ক্লিক করলে এটির সাথে যে <div> যায় সেটি ফোকাস করে না, যেখানে <label> এবং <input> for এবং id বৈশিষ্ট্যগুলি ব্যবহার করে সংযুক্ত থাকে।
ফর্ম জমা দেওয়ার পরে, <div> এ প্রবেশ করা ডেটা অনুরোধে অন্তর্ভুক্ত করা হয় না। জাভাস্ক্রিপ্টের সাথে ডেটা সংযুক্ত করার সময়, একটি <input> ডিফল্টরূপে এটি করে।
অন্তর্নির্মিত ফর্ম উপাদান অন্যান্য বৈশিষ্ট্য আছে. উদাহরণস্বরূপ, উপযুক্ত ফর্ম উপাদান এবং সঠিক inputmode বা type সহ, একটি অন-স্ক্রীন কীবোর্ড উপযুক্ত অক্ষর দেখায়। একটি <div> এ inputmode বৈশিষ্ট্য ব্যবহার করে তা করা যাবে না।
নিশ্চিত করুন যে ব্যবহারকারীরা প্রত্যাশিত ডেটা বিন্যাস সম্পর্কে সচেতন
আপনি একটি ফর্ম নিয়ন্ত্রণের জন্য বিভিন্ন বৈধতা নিয়ম সংজ্ঞায়িত করতে পারেন। উদাহরণস্বরূপ, বলুন একটি ফর্ম ক্ষেত্রের সর্বদা কমপক্ষে আটটি অক্ষর থাকা উচিত। আপনি minlength অ্যাট্রিবিউট ব্যবহার করেন, ব্রাউজারগুলিতে বৈধতা নিয়ম নির্দেশ করে। আপনি কিভাবে নিশ্চিত করতে পারেন যে ব্যবহারকারীরাও বৈধকরণের নিয়ম সম্পর্কে জানেন? তাদের বলুন.
সরাসরি ফর্ম নিয়ন্ত্রণের নীচে প্রত্যাশিত বিন্যাস সম্পর্কে তথ্য যোগ করুন। সহায়ক ডিভাইসগুলির জন্য এটি পরিষ্কার করতে, উভয়কে সংযুক্ত করতে, ফর্ম নিয়ন্ত্রণে aria-describedby অ্যাট্রিবিউট এবং একই মান সহ ত্রুটি বার্তায় একটি id ব্যবহার করুন।
ব্যবহারকারীদের একটি ফর্ম নিয়ন্ত্রণের জন্য ত্রুটি বার্তা খুঁজে পেতে সাহায্য করুন
বৈধতা সম্পর্কে পূর্ববর্তী মডিউলে, আপনি অবৈধ ডেটা এন্ট্রির ক্ষেত্রে ত্রুটি বার্তাগুলি কীভাবে দেখাতে হয় তা শিখেছেন।
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
উদাহরণস্বরূপ, যদি একটি ক্ষেত্রের একটি required বৈশিষ্ট্য থাকে এবং অবৈধ ডেটা প্রবেশ করা হয়, ফর্ম জমা দেওয়ার সময় ব্রাউজার ফর্ম নিয়ন্ত্রণের পাশে একটি ত্রুটি বার্তা দেখায়৷ স্ক্রিন রিডাররাও ত্রুটি বার্তা ঘোষণা করে।
আপনি আপনার নিজের ত্রুটি বার্তা সংজ্ঞায়িত করতে পারেন:
ফর্ম কন্ট্রোলের সাথে ত্রুটি বার্তাটি সংযুক্ত করতে এই উদাহরণটির আরও পরিবর্তন প্রয়োজন৷
একটি সহজ পদ্ধতি হল ফর্ম কন্ট্রোলে aria-describedby অ্যাট্রিবিউট ব্যবহার করা যা ত্রুটি বার্তা উপাদানের id সাথে মেলে। তারপর, ত্রুটি বার্তার জন্য aria-live="assertive" ব্যবহার করুন। ARIA লাইভ অঞ্চলগুলি স্ক্রীন রিডার ব্যবহারকারীদের ত্রুটি দেখানোর মুহুর্তে একটি ত্রুটি ঘোষণা করে৷
একাধিক ক্ষেত্র সহ ফর্মগুলির জন্য এই পদ্ধতির সমস্যা হল যে aria-live সাধারণত একাধিক ত্রুটির ক্ষেত্রে শুধুমাত্র প্রথম ত্রুটি ঘোষণা করবে। একই ক্রিয়াকলাপের একাধিক aria-live ঘোষণা সম্পর্কে এই নিবন্ধে ব্যাখ্যা করা হয়েছে আপনি সমস্ত ত্রুটিগুলি সংযুক্ত করে একটি একক বার্তা তৈরি করতে পারেন। আরেকটি পদ্ধতি হল যে ত্রুটি আছে তা ঘোষণা করা, তারপর ক্ষেত্রটি ফোকাস করা হলে স্বতন্ত্র ত্রুটি ঘোষণা করা।
ব্যবহারকারীদের ত্রুটি সনাক্ত করা নিশ্চিত করুন
কখনও কখনও ডিজাইনাররা :invalid ছদ্ম-শ্রেণী ব্যবহার করে অবৈধ অবস্থাকে লাল রঙ করে। যাইহোক, একটি ত্রুটি বা সাফল্য যোগাযোগ করার জন্য, আপনি শুধুমাত্র রঙের উপর নির্ভর করা উচিত নয়। লাল-সবুজ বর্ণান্ধতাযুক্ত ব্যক্তিদের জন্য, একটি সবুজ এবং একটি লাল সীমানা প্রায় একই রকম দেখায়। বার্তাটি কোনও ত্রুটির সাথে সম্পর্কিত কিনা তা দেখা অসম্ভব।
রঙ ছাড়াও, একটি আইকন ব্যবহার করুন, বা ত্রুটির প্রকারের সাথে আপনার ত্রুটি বার্তাগুলিকে উপসর্গ করুন৷
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
আপনার ফর্ম নেভিগেট করতে ব্যবহারকারীদের সাহায্য করুন
আপনি CSS এর মাধ্যমে ফর্ম কন্ট্রোলের ভিজ্যুয়াল অর্ডার পরিবর্তন করতে পারেন। ভিজ্যুয়াল অর্ডার এবং কীবোর্ড নেভিগেশন (DOM অর্ডার) এর মধ্যে সংযোগ বিচ্ছিন্ন হওয়া স্ক্রিন রিডার এবং কীবোর্ড ব্যবহারকারীদের জন্য সমস্যাযুক্ত।
DOM অর্ডার অনুসরণ করে পৃষ্ঠায় ভিজ্যুয়াল অর্ডার কীভাবে নিশ্চিত করা যায় সে সম্পর্কে আরও জানুন।
বর্তমানে ফোকাস করা ফর্ম কন্ট্রোল সনাক্ত করতে ব্যবহারকারীদের সাহায্য করুন
এই ফর্মের মাধ্যমে নেভিগেট করতে আপনার কীবোর্ড ব্যবহার করুন। আপনি কি চিনতে পেরেছেন যে ফর্ম কন্ট্রোলগুলি সক্রিয় হওয়ার পরে তাদের স্টাইল পরিবর্তিত হয়? এটি ডিফল্ট ফোকাস শৈলী। আপনি এটিকে ওভাররাইড করতে পারেন :focus CSS pseudo-class দিয়ে। আপনি :focus এর ভিতরে যে স্টাইলই ব্যবহার করুন না কেন, সর্বদা নিশ্চিত করুন যে ডিফল্ট স্টেট এবং ফোকাস স্টেটের মধ্যে ভিজ্যুয়াল পার্থক্যটি স্বীকৃত।
ফোকাস সূচক ডিজাইন সম্পর্কে আরও জানুন।
আপনার ফর্ম ব্যবহারযোগ্য তা নিশ্চিত করুন
আপনি বিভিন্ন ডিভাইসের মাধ্যমে আপনার ফর্ম পূরণ করে অনেক সাধারণ সমস্যা সনাক্ত করতে পারেন। শুধুমাত্র আপনার কীবোর্ড ব্যবহার করুন, একটি স্ক্রিন রিডার ব্যবহার করুন (যেমন Windows-এ NVDA বা Mac-এ ভয়েসওভার ), অথবা পৃষ্ঠাটিকে 200% জুম করুন৷ সর্বদা আপনার ফর্মগুলি বিভিন্ন প্ল্যাটফর্মে পরীক্ষা করুন, বিশেষ করে ডিভাইস বা সেটিংস যা আপনি প্রতিদিন ব্যবহার করেন না। আপনি কি স্ক্রিন রিডার ব্যবহার করছেন এমন কাউকে বা টেক্সট বড় করার সফ্টওয়্যার ব্যবহার করছেন এমন কাউকে চেনেন? তাদের আপনার ফর্ম পূরণ করতে বলুন. অ্যাক্সেসযোগ্যতার পর্যালোচনাগুলি দুর্দান্ত, প্রকৃত ব্যবহারকারীদের সাথে পরীক্ষা করা আরও ভাল।
একটি অ্যাক্সেসিবিলিটি পর্যালোচনা করা এবং প্রকৃত ব্যবহারকারীদের সাথে কীভাবে পরীক্ষা করা যায় সে সম্পর্কে আরও জানুন।