একটি <label> একটি ফর্ম নিয়ন্ত্রণকে একটি অ্যাক্সেসযোগ্য নাম এবং একটি বৃহত্তর ক্লিক লক্ষ্য দেয়। তাদের সংযুক্ত করার দুটি উপায় রয়েছে এবং এটি অ্যাক্সেসযোগ্যতার জন্য অপরিহার্য।
পদ্ধতি 1: for + id (স্পষ্ট)
html
Email address
একটি <label> একটি ফর্ম নিয়ন্ত্রণকে একটি অ্যাক্সেসযোগ্য নাম এবং একটি বৃহত্তর ক্লিক লক্ষ্য দেয়। তাদের সংযুক্ত করার দুটি উপায় রয়েছে এবং এটি অ্যাক্সেসযোগ্যতার জন্য অপরিহার্য।
for + id (স্পষ্ট)Email address
লেবেলের for ইনপুটের id এর সাথে মেলে। মার্কআপে তারা সংলগ্ন না থাকলেও এটি কাজ করে।
<label>
Email address
<input type="email" />
</label>
ইনপুট লেবেলের ভিতরে নেস্ট করা হয় — কোনো id প্রয়োজন নেই।
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
ব্যবহারকারী টাইপ করলে placeholder অদৃশ্য হয়ে যায় এবং এটি নির্ভরযোগ্যভাবে ঘোষণা করা হয় না — একমাত্র লেবেল হিসাবে কখনো এটি ব্যবহার করবেন না।
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
aria-label (বা aria-labelledby) শুধুমাত্র ব্যবহার করুন যখন দৃশ্যমান লেবেল সত্যিই সম্ভব নয়।
সঠিকভাবে সংযুক্ত লেবেলগুলি ফর্মগুলির জন্য সবচেয়ে প্রভাবশালী অ্যাক্সেসযোগ্যতা অনুশীলনগুলির মধ্যে একটি — তারা প্রতিটি নিয়ন্ত্রণকে সহায়ক প্রযুক্তির জন্য একটি নাম দেয় এবং সবার জন্য ক্লিক লক্ষ্যগুলি বৃদ্ধি করে।
একটি বাস্তব <label> পছন্দ করুন; শুধুমাত্র প্রয়োজনে aria-label এ ফিরে যান এবং placeholder কে কখনো লেবেল হিসাবে নির্ভর করবেন না।