ফর্ম

একটি ফর্ম এমন একটি উপাদান যা ব্যবহারকারীকে একটি ক্ষেত্র বা ক্ষেত্রগুলির একটি গ্রুপে ডেটা সরবরাহ করতে দেয়। ফর্মগুলি একটি একক ক্ষেত্রের মতো সহজ বা পৃষ্ঠা প্রতি একাধিক ক্ষেত্র, ইনপুট যাচাইকরণ এবং কখনও কখনও একটি ক্যাপচা সহ একটি বহু-পদক্ষেপ ফর্ম উপাদানের মতো জটিল হতে পারে৷

ফর্মগুলিকে অ্যাক্সেসযোগ্যতার দৃষ্টিকোণ থেকে সঠিকভাবে পেতে সবচেয়ে কঠিন উপাদানগুলির মধ্যে একটি হিসাবে বিবেচনা করা হয়, কারণ এর জন্য আমরা ইতিমধ্যেই কভার করেছি এমন সমস্ত উপাদানগুলির জ্ঞান প্রয়োজন, সেইসাথে শুধুমাত্র ফর্মগুলির জন্য নির্দিষ্ট অতিরিক্ত নিয়মগুলি। কিছু বোধগম্যতা এবং সময়ের সাথে, আপনি আপনার এবং আপনার ব্যবহারকারীদের জন্য একটি অ্যাক্সেসযোগ্য ফর্ম তৈরি করতে পারেন৷

ফর্ম এই কোর্সের শেষ উপাদান-নির্দিষ্ট মডিউল। এই মডিউলটি ফর্ম-নির্দিষ্ট নির্দেশিকাগুলিতে ফোকাস করবে, তবে অন্যান্য সমস্ত নির্দেশিকা যা আপনি আগের মডিউলগুলিতে শিখেছেন, যেমন বিষয়বস্তু কাঠামো , কীবোর্ড ফোকাস , এবং রঙের বৈসাদৃশ্য , ফর্ম উপাদানগুলিতেও প্রযোজ্য৷

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

ক্ষেত্র

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

ডিফল্ট সুপারিশ হল ARIA এর সাথে কাস্টম কিছু তৈরি করার পরিবর্তে প্রতিষ্ঠিত HTML প্যাটার্নগুলি ব্যবহার করা, কারণ নির্দিষ্ট বৈশিষ্ট্য এবং কার্যকারিতাগুলি - যেমন ফিল্ড স্টেট, বৈশিষ্ট্য এবং মানগুলি - HTML উপাদানগুলির মধ্যে অন্তর্নিহিতভাবে তৈরি করা হয়, যখন আপনাকে ম্যানুয়ালি কাস্টম ARIA যোগ করতে হবে৷

দ্রষ্টব্য: যদি পরিস্থিতির জন্য আপনাকে কাস্টম ফর্ম ক্ষেত্রগুলি তৈরি করতে হয়, তাহলে এই কাস্টম ফর্ম ক্ষেত্রগুলিকে যতটা সম্ভব অ্যাক্সেসযোগ্য করে তোলা যায় তা বোঝার জন্য ARIA এবং HTML , কীবোর্ড ফোকাস এবং JavaScript মডিউলগুলি পর্যালোচনা করতে ভুলবেন না৷

ARIA

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

এইচটিএমএল

<form id="sundae-order-form">
  <!-- form content -->
</form>

সবচেয়ে অ্যাক্সেসযোগ্য ফর্ম ফিল্ড প্যাটার্নগুলি বেছে নেওয়ার পাশাপাশি, যেখানে প্রযোজ্য, আপনার ক্ষেত্রে আপনার এইচটিএমএল স্বয়ংসম্পূর্ণ বৈশিষ্ট্যগুলিও যোগ করা উচিত। স্বয়ংসম্পূর্ণ বৈশিষ্ট্য যোগ করা ব্যবহারকারী এজেন্ট এবং সহায়ক প্রযুক্তি (AT) এর জন্য আরও সূক্ষ্ম সংজ্ঞা বা উদ্দেশ্য সনাক্তকরণের অনুমতি দেয়।

স্বয়ংসম্পূর্ণ বৈশিষ্ট্যগুলি ব্যবহারকারীদের ভিজ্যুয়াল উপস্থাপনাগুলিকে ব্যক্তিগতকৃত করতে দেয়, যেমন জন্মদিনের স্বয়ংসম্পূর্ণ বৈশিষ্ট্য ( bday ) এর সাথে নির্ধারিত একটি ক্ষেত্রে জন্মদিনের কেক আইকন দেখানো। আরও সাধারণভাবে, স্বয়ংসম্পূর্ণ বৈশিষ্ট্যগুলি ফর্মগুলি পূরণ করা সহজ এবং দ্রুত করে। এটি বিশেষত জ্ঞানীয় এবং পড়ার ব্যাধিযুক্ত ব্যক্তিদের জন্য এবং যারা ATs ব্যবহার করে, যেমন স্ক্রিন রিডারদের জন্য সহায়ক।

<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-বর্ণিত বৈশিষ্ট্য যোগ করা। স্ক্রিন রিডার বর্ণনা এবং লেবেল উভয়ই পড়বে।

আপনি যদি আপনার এলিমেন্টে aria-labelledby অ্যাট্রিবিউট যোগ করেন, তাহলে অ্যাট্রিবিউটের মান আপনার <label> এর মধ্যে লেখাটিকে ওভাররাইড করে। সর্বদা হিসাবে, আপনি যে সমস্ত ATs সমর্থন করার পরিকল্পনা করছেন তার সাথে চূড়ান্ত কোড পরীক্ষা করতে ভুলবেন না।

ত্রুটি

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

যখন একজন ব্যবহারকারী একটি ফর্ম ত্রুটির সম্মুখীন হয়, প্রথম পদক্ষেপটি হল ত্রুটিটি পরিচিত করা ৷ যে ক্ষেত্রটিতে ত্রুটি ঘটেছে তা অবশ্যই স্পষ্টভাবে চিহ্নিত করতে হবে এবং ত্রুটিটি নিজেই ব্যবহারকারীকে পাঠ্যে বর্ণনা করতে হবে।

ত্রুটি বার্তা প্রদর্শনের জন্য বিভিন্ন পদ্ধতি রয়েছে, যেমন:

• একটি পপ-আপ মডেল, যেখানে ত্রুটি ঘটেছে তার কাছাকাছি ইনলাইন৷
• পৃষ্ঠার শীর্ষে একটি বড় বার্তায় গোষ্ঠীভুক্ত ত্রুটিগুলির একটি সংগ্রহ৷

ত্রুটিগুলি ঘোষণা করার সময় কীবোর্ড ফোকাস এবং ARIA লাইভ অঞ্চলের বিকল্পগুলিতে মনোযোগ দিতে ভুলবেন না।

যখনই সম্ভব, ব্যবহারকারীকে কীভাবে ত্রুটিটি ঠিক করা যায় সে সম্পর্কে বিস্তারিত পরামর্শ দিন। ব্যবহারকারীদের ত্রুটি সম্পর্কে অবহিত করার জন্য দুটি বৈশিষ্ট্য উপলব্ধ।

• আপনি HTML প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করতে পারেন। ব্রাউজার ফাইল করা বৈধতা পরামিতিগুলির উপর ভিত্তি করে একটি জেনেরিক ত্রুটি বার্তা সরবরাহ করবে।
• অথবা আপনি ATs-এ একটি কাস্টমাইজড ত্রুটি বার্তা শেয়ার করতে aria-প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করতে পারেন। আপনি সমস্ত ব্যবহারকারীদের কাছে বার্তাটি দৃশ্যমান করার জন্য অতিরিক্ত কোড যোগ না করলে শুধুমাত্র ATs বার্তাটি পাবে।

একবার একজন ব্যবহারকারী মনে করেন যে সমস্ত ত্রুটিগুলি সমাধান করা হয়েছে, তাদের ফর্মটি পুনরায় জমা দেওয়ার এবং তাদের জমা দেওয়ার ফলাফল সম্পর্কে প্রতিক্রিয়া প্রদান করার অনুমতি দিন৷ একটি ত্রুটি বার্তা একজন ব্যবহারকারীকে বলে যে তাদের কাছে আরও আপডেট করতে হবে, যখন একটি সফল বার্তা নিশ্চিত করে যে তারা সমস্ত ত্রুটির সমাধান করেছে এবং সফলভাবে ফর্মটি জমা দিয়েছে৷

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

আপনার উপলব্ধি পরীক্ষা করুন

অ্যাক্সেসযোগ্য ফর্ম আপনার জ্ঞান পরীক্ষা করুন

নিচের উত্তরগুলির মধ্যে কোনটি সবচেয়ে অ্যাক্সেসযোগ্য ফর্ম ইনপুট?

Email address: <input type="email" required>

কোনো লেবেল নেই যা ইনপুটের সাথে 'ইমেল ঠিকানা' যুক্ত করে।

<label>Email address: <input type="email" required></label>

এটি স্বয়ংসম্পূর্ণ বৈশিষ্ট্য অনুপস্থিত, যা ব্যবহারকারী এজেন্ট এবং সহায়ক প্রযুক্তি (AT) এর উদ্দেশ্যে একটি সংজ্ঞা বা সনাক্তকরণ প্রদান করে।

<label>Email address: <input type="email" required autocomplete="email"></label>

এটি একটি অ্যাক্সেসযোগ্য ফিল্ড লেবেল, তবে এটি এই তালিকায় সবচেয়ে অ্যাক্সেসযোগ্য নয়।

<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format [e-mail]</span></label>

aria-describedby অ্যাট্রিবিউটটি ক্ষেত্রটি ভুলভাবে পূরণ করা হলে ব্যবহারকারীর প্রাপ্ত একটি ত্রুটির সাথে অতিরিক্ত প্রসঙ্গ যোগ করে। যদিও এই বৈশিষ্ট্যটির প্রয়োজন নেই, এটি AT ব্যবহারকারীদের জন্য উপযোগী হতে পারে।