A <label> gives a form control an accessible name and a larger click target. There are two ways to associate them, and doing so is essential for accessibility.
მეთოდი 1: for + id (ცალსახა)
html
Email address
A <label> gives a form control an accessible name and a larger click target. There are two ways to associate them, and doing so is essential for accessibility.
for + id (ცალსახა)Email address
ეტიკეტის for ემთხვევა input-ის id-ს. ეს მუშაობს მაშინაც კი, თუ ისინი მარკაპში არ არიან მიმდებარე.
<label>
Email address
<input type="email" />
</label>
input-ი ჩასმულია ეტიკეტის შიგნით — 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 -->
A placeholder გაქრება მომხმარებელი აკრეფის დროს და არ იხსნება საიმედოდ — არასოდეს გამოიყენოთ იგი როგორც ერთადერთი ეტიკეტა.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
გამოიყენეთ aria-label (ან aria-labelledby) მხოლოდ მაშინ, როდესაც ხილული ეტიკეტა ნამდვილად შეუძლებელია.
სწორად უკავშირებული ეტიკეტები ერთ-ერთი ყველაზე გავლენიანი ხელმისაწვდომობის პრაქტიკაა ფორმებისთვის — ისინი ყველა კონტროლს აძლევენ სახელს ასისტიული ტექნოლოგიისთვის და გააფართოებენ დაჭერის სამიზნეებს ყველასთვის.
უპირატესობა მიეცით რეალურ <label>-ს; დაუბრუნდით aria-label-ს მხოლოდ როდესაც საჭირო, და არასოდეს დაეყრდნოთ placeholder-ს როგორც ეტიკეტას.