0Pricing
HTML Academy · Lekcja

Element label i dostępność

Powiązać etykiety z polami input, aby zapewnić obsługę przez czytniki ekranu.

Element label i dostępność to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Dlaczego etykiety są ważne

Element <label> łączy opis tekstowy z kontrolką formularza:

  • Czytniki ekranu odczytują etykietę po ustawieniu fokusu na polu
  • Kliknięcie etykiety aktywuje powiązane pole
  • Bez etykiety użytkownicy czytników ekranu nie wiedzą, do czego służy pole

Jawna etykieta za pomocą for

Atrybut for łączy etykietę z polem input za pomocą atrybutu id:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->

Niejawna etykieta (opakowanie)

Umieszczenie pola input wewnątrz etykiety tworzy niejawne powiązanie:

<!-- No for/id needed — input is inside label -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Works fine but explicit association is more robust
     (especially when label and input are far apart in the DOM) -->

Rozdzielenie etykiety i pola input

Jeśli etykieta i pole input nie mogą znajdować się obok siebie, użyj aria-labelledby:

<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->

aria-label jako alternatywa

Jeśli widoczna etykieta nie jest możliwa, użyj aria-label:

<!-- Search form with icon button -->
<form>
  <input type="search" name="q" aria-label="Search the site">
  <button type="submit" aria-label="Submit search">
    <svg><!-- magnifier icon --></svg>
  </button>
</form>

Jedna etykieta na pole input

Każde pole input powinno mieć dokładnie jedną etykietę. W przypadku wielu pól użyj osobnych etykiet:

<!-- BAD: one label for multiple inputs -->
<label>First and last name
  <input type="text" name="first">
  <input type="text" name="last">
</label>

<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

Oznaczanie wymaganego pola

Oznaczaj wymagane pola w sposób dostępny:

<!-- Visual + accessible required indicator -->
<label for="email">
  Email address
  <span aria-hidden="true">*</span>         <!-- visual asterisk -->
  <span class="sr-only">(required)</span>    <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>

Fieldset i legend dla grup

Grupuj powiązane pola za pomocą <fieldset> i <legend>:

<fieldset>
  <legend>Shipping address</legend>

  <label for="addr-street">Street</label>
  <input type="text" id="addr-street" name="street" autocomplete="address-line1">

  <label for="addr-city">City</label>
  <input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>

Fieldset dla grup przycisków radiowych

Grupy przycisków radiowych zawsze wymagają elementów fieldset i legend:

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="text"> Text message
  </label>
</fieldset>

Placeholder nie jest etykietą

Placeholder znika, gdy użytkownik zaczyna pisać — nie może zastąpić etykiety:

<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->

<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

Wizualnie ukryte etykiety

Jeśli projekt nie zawiera widocznej etykiety, ukryj ją wizualnie, pozostawiając ją dostępną dla czytników ekranu:

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* sr-only utility class: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Szybkie sprawdzenie

Jak powiązać etykietę z polem input za pomocą jawnego powiązania?

Podsumowanie: dostępność label

Najważniejsze informacje o etykietach:

  • Każde pole input zawsze wymaga etykiety
  • <label for="id"> — jawne powiązanie
  • Umieszczenie pola input wewnątrz etykiety = niejawne powiązanie
  • aria-labelledby łączy etykietę z dowolnym elementem za pomocą jego id
  • aria-label dla przycisków zawierających wyłącznie ikonę i pozbawionych widocznego tekstu
  • <fieldset> + <legend> dla pogrupowanych kontrolek

Często zadawane pytania

Czy lekcja „Element label i dostępność” jest bezpłatna?

Tak — pełny tekst „Element label i dostępność” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Element label i dostępność”?

Powiązać etykiety z polami input, aby zapewnić obsługę przez czytniki ekranu. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Element label i dostępność”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element form: action, method i enctype
  2. Typy input: text, password, email, number i tel
  3. Element label i dostępność
  4. Element button: submit, reset i button
← Powrót do HTML Academy