ফর্ম হলো এমন একটি উপাদান যা ব্যবহারকারীকে একটি বা একাধিক ফিল্ডে ডেটা প্রদান করার সুযোগ দেয়। ফর্ম একটিমাত্র ফিল্ডের হতে পারে, অথবা এটি একটি জটিল ও বহু-ধাপের ফর্মও হতে পারে, যেখানে প্রতি পৃষ্ঠায় একাধিক ফিল্ড, ইনপুট ভ্যালিডেশন এবং ক্যাপচা (CAPTCHA) থাকে।
অ্যাক্সেসিবিলিটির দৃষ্টিকোণ থেকে ফর্মগুলোকে সবচেয়ে কঠিন উপাদানগুলোর মধ্যে একটি হিসেবে বিবেচনা করা হয়, কারণ এর জন্য আমাদের ইতিমধ্যে আলোচনা করা সমস্ত উপাদান সম্পর্কে জ্ঞানের পাশাপাশি শুধুমাত্র ফর্মের জন্য নির্দিষ্ট কিছু অতিরিক্ত নিয়মও প্রয়োজন। কিছুটা বোঝাপড়া এবং সময় দিলে, আপনি আপনার এবং আপনার ব্যবহারকারীদের জন্য উপযুক্ত একটি অ্যাক্সেসিবল ফর্ম তৈরি করতে পারবেন।
ফর্ম হলো এই কোর্সের সর্বশেষ উপাদান-ভিত্তিক মডিউল। এই মডিউলটি ফর্ম-সংক্রান্ত নির্দেশিকাগুলোর উপর আলোকপাত করে, তবে পূর্ববর্তী মডিউলগুলোতে আলোচিত নির্দেশিকাগুলো, যেমন বিষয়বস্তুর কাঠামো , কিবোর্ড ফোকাস এবং রঙের বৈসাদৃশ্য , ফর্মের উপাদানগুলোর ক্ষেত্রেও প্রযোজ্য।
ক্ষেত্র
ফর্মের মূল ভিত্তি হলো ফিল্ড। ফিল্ড হলো ছোট ইন্টারেক্টিভ প্যাটার্ন, যেমন ইনপুট বা রেডিও বাটন এলিমেন্ট, যা ব্যবহারকারীদের কন্টেন্ট প্রবেশ করাতে বা কোনো পছন্দ বেছে নিতে সাহায্য করে। বেছে নেওয়ার জন্য বিভিন্ন ধরনের ফর্ম ফিল্ড রয়েছে।
সাধারণত ARIA ব্যবহার করে নিজস্ব কিছু তৈরি করার পরিবর্তে প্রতিষ্ঠিত HTML প্যাটার্ন ব্যবহার করার পরামর্শ দেওয়া হয়, কারণ ফিল্ডের অবস্থা, প্রোপার্টি এবং মানের মতো কিছু বৈশিষ্ট্য ও ফাংশন HTML এলিমেন্টগুলোর মধ্যেই সহজাতভাবে তৈরি থাকে। কাস্টম ফিল্ডের ক্ষেত্রে আপনাকে ম্যানুয়ালি ARIA যোগ করতে হয়।
সুপারিশ করা হয় না — ARIA সহ কাস্টম HTML
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
সুপারিশকৃত — স্ট্যান্ডার্ড এইচটিএমএল
<form id="sundae-order-form">
<!-- form content -->
</form>
সবচেয়ে সহজলভ্য ফর্ম ফিল্ড প্যাটার্ন বেছে নেওয়ার পাশাপাশি, যেখানে প্রযোজ্য, আপনার ফিল্ডগুলিতে HTML অটোকমপ্লিট অ্যাট্রিবিউটও যোগ করা উচিত। অটোকমপ্লিট অ্যাট্রিবিউট যোগ করলে ইউজার এজেন্ট এবং সহায়ক প্রযুক্তি (AT)-র কাছে উদ্দেশ্যের আরও সুনির্দিষ্ট সংজ্ঞা বা শনাক্তকরণ সম্ভব হয়।
অটোকমপ্লিট অ্যাট্রিবিউট ব্যবহারকারীদের ভিজ্যুয়াল উপস্থাপনা ব্যক্তিগতকৃত করার সুযোগ দেয়, যেমন কোনো ফিল্ডে বার্থডে অটোকমপ্লিট অ্যাট্রিবিউট ( bday ) অ্যাসাইন করা থাকলে সেখানে একটি জন্মদিনের কেকের আইকন দেখানো। আরও সাধারণভাবে, অটোকমপ্লিট অ্যাট্রিবিউট ফর্ম পূরণ করাকে আরও সহজ এবং দ্রুততর করে তোলে। এটি বিশেষ করে জ্ঞানীয় ও পঠনজনিত সমস্যায় আক্রান্ত ব্যক্তি এবং যারা স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তি (AT) ব্যবহার করেন, তাদের জন্য বিশেষভাবে সহায়ক।
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
সবশেষে, ফর্ম ফিল্ডগুলিতে ফোকাস পড়লে বা ব্যবহারকারীর ইনপুট পেলে সেগুলিতে কোনো প্রাসঙ্গিক পরিবর্তন হওয়া উচিত নয়, যদি না কম্পোনেন্টটি ব্যবহার করার আগে ব্যবহারকারীকে এই আচরণ সম্পর্কে সতর্ক করা হয়। উদাহরণস্বরূপ, কোনো ফিল্ডে ফোকাস পড়লে বা ব্যবহারকারী ফিল্ডটিতে কোনো কন্টেন্ট যোগ করলে ফর্মটি স্বয়ংক্রিয়ভাবে সাবমিট হওয়া উচিত নয়।
লেবেল
লেবেল ব্যবহারকারীকে কোনো ফিল্ডের উদ্দেশ্য, সেটি আবশ্যক কিনা সে সম্পর্কে জানায় এবং ইনপুট ফরম্যাটের মতো ফিল্ডটির প্রয়োজনীয়তা সম্পর্কেও তথ্য প্রদান করতে পারে। লেবেল অবশ্যই সর্বদা দৃশ্যমান হতে হবে এবং ব্যবহারকারীদের কাছে ফর্ম ফিল্ডটিকে সঠিকভাবে বর্ণনা করতে হবে।
অ্যাক্সেসযোগ্য ফর্মের অন্যতম মৌলিক নীতি হলো একটি ফিল্ড এবং তার লেবেলের মধ্যে একটি স্পষ্ট ও সঠিক সংযোগ স্থাপন করা। এটি দৃশ্যগতভাবে এবং প্রোগ্রামগতভাবে উভয় ক্ষেত্রেই প্রযোজ্য। এই প্রেক্ষাপট ছাড়া, একজন ব্যবহারকারী হয়তো বুঝতে পারবেন না যে ফর্মের ফিল্ডগুলো কীভাবে পূরণ করতে হবে।
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
এছাড়াও, ডাক ঠিকানার মতো সম্পর্কিত ফর্ম ফিল্ডগুলোকে প্রোগ্রামগতভাবে এবং দৃশ্যত একত্রিত করার প্রয়োজন হয়। এর একটি পদ্ধতি হলো একই ধরনের উপাদানগুলোকে একত্রিত করতে ফিল্ডসেট এবং লিজেন্ড প্যাটার্ন ব্যবহার করা।
বর্ণনা
ফিল্ডের বিবরণ উদ্দেশ্যের দিক থেকে লেবেলের মতোই, কারণ এগুলো ফিল্ড এবং এর প্রয়োজনীয়তা সম্পর্কে আরও বিশদ ধারণা দিতে ব্যবহৃত হয়। যদি লেবেল বা ফর্মের নির্দেশাবলী যথেষ্ট বর্ণনামূলক হয়, তবে অ্যাক্সেসিবিলিটির জন্য ফিল্ডের বিবরণের প্রয়োজন হয় না।
তবে, এমন কিছু পরিস্থিতি রয়েছে যেখানে ফর্মের ভুল এড়ানোর জন্য অতিরিক্ত তথ্য যোগ করা উপকারী হতে পারে, যেমন পাসওয়ার্ড ফিল্ডের জন্য ইনপুটের ন্যূনতম দৈর্ঘ্য সম্পর্কে তথ্য জানানো অথবা ব্যবহারকারীকে কোন ক্যালেন্ডার ফরম্যাট (যেমন MM-DD-YYYY) ব্যবহার করতে হবে তা বলে দেওয়া।
আপনার ফর্মে ফিল্ডের বিবরণ যোগ করার জন্য বিভিন্ন পদ্ধতি রয়েছে। অন্যতম সেরা একটি পদ্ধতি হলো, ফর্ম এলিমেন্টে একটি <label> এলিমেন্টের পাশাপাশি একটি aria-describedby অ্যাট্রিবিউট যোগ করা। স্ক্রিন রিডার বিবরণ এবং লেবেল উভয়ই পড়ে শোনাবে।
যদি আপনি আপনার এলিমেন্টে aria-labelledby অ্যাট্রিবিউটটি যোগ করেন, তাহলে অ্যাট্রিবিউটের মানটি আপনার <label> ভেতরের টেক্সটকে ওভাররাইড করে দেবে। বরাবরের মতোই, আপনি যে সমস্ত AT (অ্যাট্রিবিউট ট্যাগ) সমর্থন করতে চান, সেগুলোর সবকটি দিয়ে চূড়ান্ত কোডটি পরীক্ষা করে দেখুন।
ত্রুটি
অ্যাক্সেসিবল ফর্ম তৈরি করার সময়, ব্যবহারকারীদের ফর্মের ভুল করা থেকে বিরত রাখতে অনেক কিছুই করা যায়। এই মডিউলের শুরুতে আমরা ফিল্ডগুলোকে স্পষ্টভাবে মার্ক-আপ করা, শনাক্তকারী লেবেল তৈরি করা এবং যখনই সম্ভব বিস্তারিত বিবরণ যোগ করার বিষয়ে আলোচনা করেছি। কিন্তু আপনার ফর্মটি যতই স্পষ্ট বলে মনে হোক না কেন, শেষ পর্যন্ত একজন ব্যবহারকারী ভুল করবেই।
যখন কোনো ব্যবহারকারী ফর্মের কোনো ত্রুটির সম্মুখীন হন, তখন প্রথম পদক্ষেপ হলো ত্রুটিটি সম্পর্কে ব্যবহারকারীকে জানানো । যে ফিল্ডে ত্রুটিটি ঘটেছে, তা অবশ্যই স্পষ্টভাবে চিহ্নিত করতে হবে এবং ত্রুটিটি ব্যবহারকারীকে লিখিত আকারে বর্ণনা করতে হবে।
ত্রুটির বার্তা প্রদর্শনের বিভিন্ন পদ্ধতি রয়েছে, যেমন:
- যেখানে ত্রুটি ঘটেছে তার কাছাকাছি একটি মোডাল।
- পৃষ্ঠার শীর্ষে একটি বৃহত্তর বার্তায় একত্রিত ত্রুটিসমূহ।
ত্রুটি ঘোষণা করার সময় কীবোর্ড ফোকাস এবং ARIA লাইভ রিজিয়ন অপশনগুলোর দিকে অবশ্যই মনোযোগ দিন।
যখনই সম্ভব, ব্যবহারকারীকে ত্রুটিটি কীভাবে সমাধান করা যায় সে সম্পর্কে একটি বিস্তারিত পরামর্শ দিন। ব্যবহারকারীদের ত্রুটি সম্পর্কে অবহিত করার জন্য দুটি অ্যাট্রিবিউট উপলব্ধ রয়েছে।
- আপনি HTML-এর ` required` অ্যাট্রিবিউট ব্যবহার করতে পারেন। ব্রাউজারটি ফাইল ভ্যালিডেশন প্যারামিটারগুলোর উপর ভিত্তি করে একটি সাধারণ এরর মেসেজ প্রদান করে।
- অথবা আপনি AT-দের কাছে একটি কাস্টমাইজড এরর মেসেজ শেয়ার করতে aria-required অ্যাট্রিবিউট ব্যবহার করতে পারেন। শুধুমাত্র AT-রাই এই মেসেজটি পায়, যদি না আপনি এমন কোনো কোড যোগ করেন যা মেসেজটিকে সকল ব্যবহারকারীর কাছে দৃশ্যমান করে তোলে।
ব্যবহারকারী যখন মনে করেন যে সমস্ত ত্রুটি সমাধান করা হয়েছে, তখন তাকে ফর্মটি পুনরায় জমা দেওয়ার এবং তার জমার ফলাফল সম্পর্কে মতামত জানানোর সুযোগ দিন। একটি ত্রুটি বার্তা ব্যবহারকারীকে জানায় যে তাকে আরও কিছু আপডেট করতে হবে, অন্যদিকে একটি সফলতার বার্তা নিশ্চিত করে যে তিনি সমস্ত ত্রুটি সমাধান করেছেন এবং সফলভাবে ফর্মটি জমা দিয়েছেন।
অতিরিক্ত সাফল্যের মানদণ্ড
WCAG 2.2 নিম্নলিখিত সফলতার মানদণ্ডগুলো প্রবর্তন করেছে, যা আরও প্রবেশযোগ্য ফর্ম অভিজ্ঞতার উপর আলোকপাত করে: