En <label> ger en formulärkontroll ett tillgängligt namn och ett större klickområde. Det finns två sätt att associera dem, och det är väsentligt för tillgänglighet.
Metod 1: for + id (explicit)
html
Email address
En <label> ger en formulärkontroll ett tillgängligt namn och ett större klickområde. Det finns två sätt att associera dem, och det är väsentligt för tillgänglighet.
for + id (explicit)Email address
Etikettas for motsvarar inmatningens id. Detta fungerar även om de inte är intilliggande i markeringen.
<label>
Email address
<input type="email" />
</label>
Inmatningen är kapslad inuti etiketten — inget id behövs.
<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 -->
En placeholder försvinner när användaren skriver och meddelas inte tillförlitligt — använd den aldrig som den enda etiketten.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Använd aria-label (eller aria-labelledby) endast när en synlig etikett verkligen inte är möjlig.
Orientligt associerade etiketter är en av de mest påverkande tillgänglighetspraxiserna för formulär — de ger varje kontroll ett namn för hjälpteknologi och förstör klickområden för alla.
Föredraga en riktig <label>; falla tillbaka på aria-label endast vid behov, och förlita dig aldrig på placeholder som en etikett.